Links

Waarom een linktekst zoveel verschil maakt

Wie een schermlezer gebruikt, leest een pagina vaak niet van boven naar beneden. Een schermlezer kan een lijst opvragen van alle links op de pagina, en die lijst bevat alleen de linkteksten. De alinea eromheen valt weg. Staan er zes keer de woorden “lees meer” in die lijst, dan is er niets te kiezen.

Een schermlezer is het bekendste voorbeeld van hulpsoftware: een programma dat niet naar het scherm kijkt, maar de code van de pagina uitleest en voorleest of op een brailleregel zet. De drie die je het meest tegenkomt zijn NVDA en JAWS op Windows en VoiceOver op Mac en iPhone.

Hulpsoftware is breder dan dat. Spraakbesturing hoort er ook bij: iemand zegt “klik retourbeleid” en de computer activeert de link met die naam. Daarom gaat dit hoofdstuk over twee dingen: wat een link betekent, en met welke precieze woorden je hem kunt aanspreken.

Eerst dit: de toegankelijke naam

De toegankelijke naam is de tekst die hulpsoftware van een element doorgeeft. Bij een link is dat meestal gewoon de linktekst. Maar niet altijd:

• Zit er een afbeelding in de link, dan is de alt-tekst van die afbeelding de naam.
• Staat er een aria-label op de link, dan overschrijft die alles. De zichtbare tekst verdwijnt dan uit de naam.

Die laatste is de valkuil van dit hoofdstuk. Je ziet iets anders staan dan de computer doorgeeft.

Wat WCAG vraagt

Het hoofdcriterium is succescriterium 2.4.4 Linkdoel (in context), niveau A. De Engelse tekst van WCAG 2.2:

The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.

Twee dingen zitten daarin. Het doel van de link moet duidelijk zijn uit de linktekst zelf, of uit de linktekst plus de context. En die context is niet alles wat er visueel in de buurt staat.

Welke context meetelt

De woordenlijst van WCAG geeft als voorbeeld van context: tekst in dezelfde alinea, in hetzelfde lijstitem, in dezelfde tabelcel, of in de kopcel van de tabel die bij die cel hoort. Schermlezers kunnen ook de zin eromheen gebruiken.

Wat er niet bij staat: een kop boven een blok met links. Een <h2> boven een rij kaartjes maakt de linkteksten eronder dus niet duidelijk. In onze audits leunen we daar niet op.

De regels voor een goede link

Zeg waar de link heen gaat

<p>Je kunt een product binnen 30 dagen terugsturen.</p>
<a href="/retourbeleid">Lees meer</a>

<p>Je kunt een product binnen 30 dagen terugsturen.</p>
<a href="/retourbeleid">Lees meer over ons retourbeleid</a>

Moet de opmaak kort blijven, verberg dan de aanvulling

Soms wil een ontwerp maar twee woorden kwijt onder een kaartje. Je kunt de aanvulling dan visueel verbergen en in de naam laten staan. Dat is de oplossing die wij in rapporten voorstellen.

<a href="/retourbeleid">Lees meer<span class="sr-only"> over ons retourbeleid</span></a>

De klasse sr-only is een stukje CSS dat de tekst van het scherm haalt en voor hulpsoftware laat staan. Zet die tekst nooit op display: none, want dan verdwijnt hij ook uit de naam.

Dezelfde tekst betekent dezelfde bestemming

Staan er twee links met de tekst “Aanmelden” op één pagina die naar verschillende formulieren gaan, dan kun je ze op naam niet onderscheiden. Bij ons is dat een bevinding op 2.4.4 binnen één pagina, met impact Matig.

Het spiegelbeeld bestaat ook. Drie links met de teksten “Contact”, “Neem contact op” en “Contactgegevens” die alle drie naar /contact gaan, zijn hetzelfde onderdeel met drie namen. Dat melden wij op succescriterium 3.2.4 Consistente identificatie, niveau AA: onderdelen met dezelfde functie moeten op de hele site hetzelfde worden aangeduid. Kies één tekst en houd die vast.

Een afbeelding als link krijgt de bestemming als alt-tekst

Is de hele link een afbeelding, dan is de alt-tekst de naam van de link. Beschrijf dan niet de afbeelding, maar waar je terechtkomt.

<a href="/"><img src="/images/logo.svg" alt="Logo"></a>

<a href="/"><img src="/images/logo.svg" alt="Proper Access, naar de homepage"></a>

Staat er naast de afbeelding ook tekst in dezelfde link, dan hoeft de afbeelding niets toe te voegen. Geef die dan een leeg alt, zodat de naam niet dubbel wordt voorgelezen.

Een URL is geen linktekst

https://www.example.com/producten/handleiding-2026.pdf als zichtbare linktekst laat een schermlezer soms letter voor letter of als losse woorddelen voorlezen. Schrijf er een naam van: “Handleiding 2026 (PDF)”.

Het title-attribuut lost niets op

Een title op een link verschijnt als tooltip bij de muis, niet bij toetsenbordfocus en niet op een telefoon. Een title die de linktekst herhaalt, voegt niets toe; bij ons is dat een advies in het rapport, geen zakker. Een vage linktekst repareer je niet met een title.

Een nieuw tabblad aankondigen is netjes, geen eis

Geen enkel succescriterium op A of AA vraagt dat je “opent in een nieuw tabblad” in de linktekst zet. Techniek G201 van WCAG noemt het goede praktijk en zegt er zelf bij dat het niet nodig is om aan een criterium te voldoen. Doe het dus als het je gebruikers helpt, en noem het geen WCAG-eis.

Een link moet ook zichtbaar zijn

Hiernaast staat een tweede criterium: 1.4.1 Gebruik van kleur, niveau A. Kleur mag niet het enige verschil zijn waarmee je iets herkent. Een link in een alinea die alleen blauw is, valt daar onder: wie kleuren niet goed kan onderscheiden, ziet niet dat daar een link staat.

De duidelijkste oplossing is een onderstreping. Die werkt voor iedereen.

Wil je het zonder onderstreping, dan mag dat, op één voorwaarde. Techniek G183 van WCAG vraagt dan een contrast van minstens 3:1 tussen de linktekst en de tekst eromheen. Let op drie dingen:

• Een techniek is een manier om te voldoen, geen eis. Een link die onderstreept is, voldoet aan 1.4.1 ongeacht dat getal.
• Dit staat los van 1.4.3 Contrast. Beide kleuren moeten daarnaast hun eigen contrast met de achtergrond halen. Dat zijn twee metingen.
• Het kenmerk moet in de ruststand te zien zijn. Verschijnt de onderstreping pas bij de muis of bij focus, dan is dat volgens failure F73 nog steeds een fout.

De zichtbare tekst hoort in de naam

Het derde criterium van dit hoofdstuk is 2.5.3 Label in naam, niveau A: de naam van een onderdeel bevat de tekst die je ziet staan. Dat criterium bestaat voor spraakbesturing. Iemand zegt wat er staat, en dan moet de computer dat onderdeel vinden.

<a href="/offerte" aria-label="Vraag een onderzoek aan">Offerte</a>

<a href="/offerte">Offerte<span class="sr-only"> aanvragen voor een onderzoek</span></a>

Vermijd aria-label op een link die al zichtbare tekst heeft. De Understanding-pagina bij 2.5.3, de uitleg van de werkgroep en zelf geen norm, zegt het zo: “when a visible label already exists, aria-label should be avoided or used carefully”.

Veelgemaakte fouten

Dit zijn de bevindingen die wij in audits het vaakst op links schrijven:

• Onduidelijke linktekst, zoals “lees meer” of “klik hier” zonder context. Impact Matig.
• Dezelfde linktekst, verschillende bestemming op één pagina. Impact Matig.
• Verschillende linkteksten, dezelfde bestemming over de site heen. Dat is 3.2.4. Impact Matig.
• Gelinkte afbeelding zonder bruikbare alt-tekst, dus een link zonder naam. Impact Matig.
• Links onvoldoende herkenbaar, alleen een kleurverschil in lopende tekst. Impact Matig.
• Zichtbare linktekst ontbreekt in de toegankelijke naam. Impact Serieus, want spraakbesturing werkt dan niet.
• Onleesbare tekens in de naam, zoals een pijl of een los teken dat als woord wordt voorgelezen.

WCAG-succescriteria

Verder lezen

• URL als linktekst, over wat een schermlezer met een webadres doet
• aria-labelledby verwijst naar de verkeerde tekst, een veelgemaakte fout bij 2.5.3
• Gelinkte afbeelding, het voorbeeld van een productfoto in een webshop

Quiz