Een duidelijke linktekst helpt bezoekers te begrijpen waar ze naartoe gaan als ze klikken. Dit is extra belangrijk voor mensen die een schermlezer gebruiken.
Linkteksten vallen onder succescriterium 2.4.4 Linkdoel (in context) van de richtlijnen voor toegankelijkheid van webcontent.
Links gebruiken
Zorg dat de linktekst het doel van de link beschrijft. Vraag jezelf af: welke informatie of welke pagina staat er achter deze link? Gebruik geen algemene linkteksten zoals “Lees meer” of “Klik hier”. Schrijf in plaats daarvan bijvoorbeeld “Lees meer over toegankelijke links”.
Gebruik links alleen om te verwijzen naar een andere locatie. Bijvoorbeeld naar een andere website, een andere pagina op jouw website of een andere plek op de dezelfde pagina.
In een CMS kun je meestal eenvoudig een link toevoegen via de editor. Selecteer de tekst die een link moet worden en voeg de link toe. (Vaak ziet dit icoon er uit als schakels in een ketting.)
In WordPress ziet dit er zo uit:
Code voor links
Links worden in de code opgemaakt met het <a>-element. Dit element heeft het href-attribuut, waarin je de verwijzing toegevoegd. Alle content die tussen de begintag en de eindtag van het <a>-element staat vormt de linktekst.
<a href="https://www.niekderksen.nl/artikelen">Artikelen</a>Functionele afbeeldingen
Je kunt ook een afbeelding als link gebruiken. In dat geval wordt het tekstalternatief van de afbeelding de linktekst. Dit tekstalternatief geef je aan met het alt-attribuut van het <img>-element.
<a href="https://wcag.nl">
<img src="logo-wcag.jpg" alt="WCAG.nl">
</a>Lees meer over tekstalternatieven bij een afbeelding
Context van de link
Soms past een uitgebreide linktekst niet goed in het ontwerp van de pagina. In dat geval mag je ook de omringende context gebruiken om duidelijk te maken waar de link naartoe gaat. Doorgaans is dit de content uit hetzelfde HTML-element.
De omliggende context is bijvoorbeeld:
- tekst in dezelfde zin of alinea
- tekst in dezelfde tabelcel of in hetzelfde lijstonderdeel
- het
aria-label-attribuut - het
aria-labelledby-attribuut - tekst verborgen met CSS
Tekst verbergen met CSS
Met CSS kan tekst buiten beeld worden geplaatst. Het is wel aanwezig in de leesvolgorde van een schermlezer, maar niet zichtbaar voor mensen die kunnen zien. Een schermlezer presenteert de tekst alsof het er gewoon staat.
In de HTML ziet dat er zo uit:
<a href="/tekstalternatieven">
Lees meer <span class="sr-only">over tekstalternatieven</span>
</a>Met de stijlkenmerken:
.sr-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}Tips voor toegankelijke links
Tot slot nog een paar tips voor het schrijven van een goede linktekst:
- Gebruik geen teksten zoals “link:” of “link naar..” in de linktekst.
- Zorg dat links die naar hetzelfde linkdoel verwijzen steeds dezelfde linktekst hebben.
- Zorg dat links minimaal op 2 manieren te onderscheiden zijn van gewone tekst (bijvoorbeeld door een andere kleur én onderstreping).
- Toon het volledige e-mailadres als de link naar een e-mailadres gaat.
- Toon het volledige telefoonnummer als de link naar een telefoonnummer gaat.
- Toon de extensie en grootte als de link naar een bestand gaat (bijvoorbeeld: “Jaarverslag 2024.pdf, 2,1 MB”).