Stelt u zich deze lijst voor: “Lees meer. Lees meer. Lees meer. Klik hier. Lees meer. Meer info.” Zo klinkt de blogpagina van menige website als iemand met een schermlezer om een overzicht van alle links vraagt. Twaalf links, en geen enkele zegt waar hij heen gaat. Een toegankelijke linktekst is een tekst die ook los van de zin eromheen duidelijk maakt wat de bezoeker krijgt als hij erop klikt.
Waarom de linktekst zo belangrijk is
Schermlezergebruikers lezen een pagina niet altijd van boven naar beneden. Net zoals ze met koppen door de tekst springen, kunnen ze met de Tab-toets van link naar link gaan, of een lijst met alle links op de pagina opvragen. In beide gevallen horen ze alleen de linktekst. De zin ervoor en erna hoort er niet bij.
Ook ziende bezoekers scannen op links. Een onderstreepte, gekleurde tekst trekt de aandacht. Staat er “klik hier”, dan moet het oog terug naar de zin om te snappen waar het over gaat. Staat er “bekijk de verzendkosten”, dan is het in één keer duidelijk.
En voor bezoekers die spraakbesturing gebruiken, is de linktekst wat ze uitspreken om erop te klikken. “Klik op verzendkosten” werkt. “Klik op lees meer”, als er tien zijn, levert een genummerde keuzelijst op.
Wat WCAG vraagt
Succescriterium 2.4.4 Doel van een link (in context), niveau A, vraagt dat het doel van elke link duidelijk is uit de linktekst zelf, of uit de linktekst samen met de directe context, zoals de zin of het lijstitem waarin hij staat.
Dat “in context” geeft wat ruimte: een link “lees meer” direct onder een kop kan technisch soms voldoen. Maar de strengere variant, 2.4.9 (niveau AAA), vraagt dat de linktekst op zichzelf duidelijk is. Dat is ook de praktische aanpak: schrijf linkteksten die zonder context werken, dan zit u altijd goed.
Van vaag naar duidelijk: voorbeelden
| Vaag | Duidelijk |
|---|---|
| Klik hier om ons te bellen | Bel ons op 012 345 67 89 |
| Meer weten? Lees meer | Lees hoe de proefperiode werkt |
| Download | Download de handleiding (pdf, 2 MB) |
| Bekijk hier onze voorwaarden | Bekijk onze algemene voorwaarden |
| https://www.voorbeeld.nl/producten/categorie?id=42 | Alle tuinstoelen |
Het patroon: zet het onderwerp in de link, en laat woorden als “hier”, “klik” en “deze” weg. Een volledige URL als linktekst is voor een schermlezer een lange rij letters en tekens. Gebruik die alleen als het adres zelf de informatie is, bijvoorbeeld in een document dat ook geprint wordt.
Het “lees meer”-probleem op blog- en productoverzichten
Overzichtspagina’s zijn de grootste bron van vage links. Elk blogbericht, elke dienst of elk product krijgt een kaartje met een knop “Lees meer”. In het thema of de pagebuilder staat die tekst vast.
Er zijn drie oplossingen, van best naar minst goed:
- Maak de titel de link. De titel van het bericht of product is precies de goede linktekst. Laat de aparte “lees meer”-knop weg, of zorg dat het hele kaartje via de titel klikbaar is.
- Maak de knoptekst specifiek. Sommige thema’s laten u per item de knoptekst kiezen, of voegen de titel toe: “Lees meer over onderhoud aan zonnepanelen”.
- Voeg verborgen tekst toe. Zichtbaar blijft “Lees meer”, maar voor schermlezers staat er meer:
<a href="/blog/zonnepanelen-onderhoud/">
Lees meer<span class="screen-reader-text"> over onderhoud aan zonnepanelen</span>
</a>De klasse screen-reader-text verbergt tekst visueel, maar laat hem voor schermlezers staan. De meeste WordPress-thema’s hebben die klasse al. Let op: voor spraakbesturing is dit minder handig, omdat de zichtbare tekst niet overeenkomt met de volledige naam. Begin dus bij optie 1 of 2.
Een aria-label op de link is een vierde optie, maar die vervangt de zichtbare tekst helemaal. Wanneer dat verstandig is en wanneer niet, leest u in aria-label: wanneer wel en wanneer niet.
Links naar pdf’s en andere bestanden aankondigen
Een bezoeker die op een link klikt, verwacht een webpagina. Opent er een pdf van 8 MB, of start er een download, dan is dat een verrassing. Op een mobiele verbinding is het vervelend, met een schermlezer kan het verwarrend zijn, omdat een pdf in een andere omgeving opent.
Zet het bestandstype en, bij grotere bestanden, de grootte daarom in de linktekst:
<a href="/wp-content/uploads/prijslijst-2026.pdf">Prijslijst 2026 (pdf, 1,2 MB)</a>Hetzelfde geldt voor links die in een nieuw venster openen. Liever doet u dat helemaal niet, want het breekt de Terug-knop. Moet het toch, meld het dan in de linktekst: “(opent in nieuw venster)”.
De pdf zelf moet trouwens ook toegankelijk zijn. Daarover meer op de pagina pdf's toegankelijk maken.
Nog een paar vuistregels
- Dezelfde tekst, hetzelfde doel. Twee links met de tekst “Contact” moeten naar dezelfde pagina gaan.
- Niet te lang. Een hele zin als link is lastig te scannen. Kies de vier tot acht woorden die het doel beschrijven.
- Zichtbaar als link. Gebruik naast kleur nog een ander kenmerk, zoals onderstreping, zodat ook kleurenblinde bezoekers links herkennen in lopende tekst.
- Een link is geen knop. Een link gaat ergens heen, een knop doet iets. Waarom dat uitmaakt, staat in knop of link.
Zelf uw linkteksten nalopen
Open een belangrijke pagina en lees alleen de links, alsof de rest van de tekst er niet is. Weet u bij elke link waar hij heen gaat? Met de WAVE-extensie of de lijst met links in een schermlezer kunt u dat ook voor de hele pagina in één keer zien. Begin met de pagina’s met de meeste “lees meer”-knoppen: dat levert de snelste winst op.
Linkteksten zijn een van de onderdelen die u als redacteur volledig in de hand heeft. Hoe dat past in het geheel, leest u in uw website toegankelijk maken.
Vraag een gratis websitecheck aan. Binnen één werkdag weet u waar uw website staat.
