Linktekst die ook buiten context klopt

Hoe schermlezergebruikers echt navigeren

Voordat we het hebben over hoe je linktekst schrijft, helpt het om te begrijpen hoe mensen links daadwerkelijk gebruiken wanneer ze de pagina niet kunnen zien.

Schermlezers bieden een snelkoppeling waarvan de meeste ziende gebruikers niet weten dat die bestaat: door op één toets te drukken (meestal de letter L in de meeste schermlezers) doorloop je alle links op de pagina, die één voor één en buiten context worden voorgelezen. Gebruikers zetten dit in om een pagina snel te scannen, zoals het oog van een ziende gebruiker over de koppen en actieknoppen zou glijden.

Als je pagina twaalf links heeft die “Lees meer” zeggen, is die lijst betekenisloos. De gebruiker hoort: “Lees meer. Lees meer. Lees meer. Lees meer…”. Ze kunnen niet zien waar een van deze naartoe leidt.

Dit is het fundamentele probleem dat toegankelijkheid van linktekst probeert op te lossen: elke link moet zichzelf beschrijven, want context verdwijnt wanneer je via links navigeert.

Wat WCAG zegt

2.4.4 Linkdoel (in context) op niveau A vereist dat het doel van elke link kan worden bepaald op basis van de linktekst alleen, of op basis van de linktekst samen met de omringende context (de alinea, het lijstitem, de tabelcel of de kop waarin de link staat).

2.4.9 Linkdoel (alleen link) op niveau AAA gaat verder en vereist dat het linkdoel uit de linktekst alleen kan worden bepaald, zonder op context te vertrouwen. Hiernaar streven is een goed idee, zelfs als je alleen op AA-conformiteit mikt.

2.5.3 Label in naam (niveau A) vereist dat wanneer een link of knop een zichtbaar tekstlabel heeft, de toegankelijke naam met die tekst begint. Een pictogramknop met het label “Meer informatie over toegankelijkheid” en een aria-label van “Klik hier” voldoet niet aan dit criterium.

Veelvoorkomende fouten en wat je in plaats daarvan moet doen

”Klik hier” en “Lees meer”

Dit zijn de meest wijdverbreide fouten in linktoegankelijkheid op het web.

<!-- Voldoet niet: geen betekenis buiten context -->
<a href="/blog/wcag-compliance">Lees meer</a>

<!-- Voldoet: zelfbeschrijvend -->
<a href="/blog/wcag-compliance">Lees onze WCAG 2.2-conformiteitsgids</a>

De oplossing is bijna altijd eenvoudig: vervang de vage zinsnede door tekst die de bestemming of actie beschrijft.

Generieke “hier”-links

“Klik hier om het rapport te downloaden” faalt om dezelfde reden — het linkwoord zelf is gewoon “hier”.

<!-- Voldoet niet -->
<p>Voor de volledige bevindingen, klik <a href="/report.pdf">hier</a>.</p>

<!-- Voldoet: linktekst beschrijft waarnaar wordt gelinkt -->
<p>Download het <a href="/report.pdf">toegankelijkheidsauditrapport 2025 (PDF)</a>.</p>

Let op de PDF-aanduiding tussen haakjes — dit is een goede gewoonte om gebruikers te informeren dat het volgen van de link een PDF opent in plaats van een webpagina.

Links naar dezelfde bestemming met verschillende tekst, of verschillende bestemmingen met dezelfde tekst

Beide creëren verwarring. Als vijf navigatielinks allemaal “Meer informatie” zeggen maar naar verschillende dienstenpagina’s verwijzen, kunnen gebruikers niet voorspellen waar ze uitkomen. Omgekeerd zijn twee verschillende links die “WCAG-conformiteitsgids” zeggen maar naar verschillende pagina’s gaan, net zo verwarrend.

Links en knoppen met alleen een pictogram

Een link of knop die alleen een pictogram bevat — geen zichtbare tekst — moet een toegankelijke naam hebben die via aria-label of aria-labelledby wordt geleverd. Zonder deze kondigen schermlezers de bestandsnaam van de pictogramafbeelding aan, of helemaal niets.

<!-- Voldoet niet: aangekondigd als "link, afbeelding" of de SVG-bestandsnaam -->
<a href="/social/twitter">
  <svg><!-- twitter-pictogram --></svg>
</a>

<!-- Voldoet: aria-label levert de toegankelijke naam -->
<a href="/social/twitter" aria-label="QualiBooth op Twitter">
  <svg aria-hidden="true"><!-- twitter-pictogram --></svg>
</a>

De aria-hidden="true" op de SVG voorkomt dat schermlezers de titel of inhoud van de SVG aankondigen — aangezien de link zelf al een label heeft, is de inhoud van het pictogram overbodig.

aria-label gebruiken als aanvulling op zichtbare tekst

Wanneer een pagina meerdere “Downloaden”-links heeft en je de zichtbare tekst niet kunt wijzigen (een ontwerpbeperking), kan aria-label de toegankelijke naam uitbreiden:

<!-- De zichtbare tekst is "Downloaden" maar de toegankelijke naam is de volledige tekst -->
<a href="/report-2025.pdf" aria-label="Download toegankelijkheidsrapport 2025 PDF">
  Downloaden
</a>

Een waarschuwing hierbij: WCAG 2.5.3 vereist dat de toegankelijke naam begint met de zichtbare tekst. “Download toegankelijkheidsrapport 2025 PDF” begint met “Download” — goed. “Toegankelijkheidsrapport 2025 — Download PDF” doet dat niet — fout.

Links die in een nieuw tabblad openen

Een nieuw tabblad openen zonder waarschuwing brengt gebruikers in verwarring, met name mensen met een cognitieve beperking of schermlezergebruikers die zich mogelijk niet realiseren wat er is gebeurd. Geef het gedrag van een nieuw tabblad aan in de linktekst of met een visueel verborgen notitie.

<!-- Signaleert het gedrag van een nieuw tabblad visueel en aan hulptechnologie -->
<a href="https://example.com" target="_blank">
  Bekijk voorbeeldrapport
  <span class="sr-only">(opent in nieuw tabblad)</span>
</a>

Wanneer linktekst werkt zonder voor de hand te liggen

Context kan onder WCAG 2.4.4 op legitieme wijze de ontbrekende betekenis leveren. Een “Downloaden”-link is acceptabel als deze in een tabelcel staat waarvan de kolomkop “Jaarverslag” zegt en de rijkop “2025”. De context maakt het doel duidelijk.

Dit verschilt van een “Lees meer”-link aan het einde van een op zichzelf staande alinea. De alinea levert context, maar “Lees meer” faalt nog steeds omdat de linktekst op elke alinea van toepassing zou kunnen zijn — het identificeert de bestemming niet uniek.

Afbeeldingslinks

Wanneer de linkinhoud een afbeelding is in plaats van tekst, wordt het alt-attribuut van de afbeelding de toegankelijke naam van de link. De alt-tekst moet de bestemming van de link beschrijven, niet de afbeelding zelf.

<!-- De alt beschrijft de linkbestemming, niet het uiterlijk van de afbeelding -->
<a href="/services/audits">
  <img src="audit-icon.png" alt="Diensten voor toegankelijkheidsaudits">
</a>

Als de afbeelding puur decoratief is en vergezeld gaat van zichtbare tekst in dezelfde link, moet de afbeelding alt="" hebben om te voorkomen dat dezelfde tekst twee keer wordt aangekondigd.

Een snelle audit die je zelf kunt uitvoeren

Open je pagina en haal de lijst met links op met je schermlezer (of installeer de gratis browserextensie HeadingsMap of WAVE om links uit hun context te halen). Lees de lijst door. Als je niet uit de tekst alleen kunt opmaken waar elke link naartoe gaat, heeft die verbetering nodig.

De meest voorkomende oplossing is het toevoegen van een <span class="sr-only"> (visueel verborgen, toegankelijk voor schermlezers) met aanvullende context, of gewoon de linktekst volledig herschrijven. Herschrijven heeft altijd de voorkeur — het verbetert vaak de bruikbaarheid voor iedereen, niet alleen voor schermlezergebruikers.

Voor een grondige beoordeling van de links en andere WCAG-criteria van je site behandelen onze handmatige toegankelijkheidsaudits het linkdoel als onderdeel van een bredere beoordeling door testers die dagelijks hulptechnologie gebruiken.