Een duidelijke link helpt bezoekers te begrijpen waar ze naartoe gaan als ze klikken. Dit is extra belangrijk voor mensen die een schermlezer gebruiken en mensen die een cognitieve beperking hebben.
Links hebben verschillende functies:
- Links verwijzen naar een andere locatie. Bijvoorbeeld naar een andere website, een andere pagina op jouw website of een andere plek op de dezelfde pagina.
- Schermlezers kunnen een lijst maken van alle links op een webpagina. Zo kunnen bezoekers snel naar het juiste deel van de tekst gaan.
- Schermlezers hebben een ingebouwde sneltoets waarmee snel van link naar link kan worden gesprongen.
Correct gebruik van links is dus belangrijk voor toegankelijkheid en gebruiksvriendelijkheid.
Linktekst schrijven
Zorg dat de linktekst het doel van de link beschrijft. Vraag jezelf af: welke informatie of welke pagina staat er achter deze link? Een goede linktekst geeft daar antwoord op.
Gebruik daarom geen algemene teksten zoals “Lees meer” of “Klik hier”. Die vertellen niets over het doel van de link. Schrijf in plaats daarvan bijvoorbeeld “Lees meer over toegankelijke links”. Dat geeft meteen duidelijkheid over de informatie achter de link.
Zet het belangrijkste woord vooraan in de linktekst. Dat helpt bij het scannen van de pagina. Schrijf dus “Jaarrapport 2024 downloaden” in plaats van “Klik hier om het jaarrapport 2024 te downloaden”.
Houd linkteksten kort en concreet. Een schermlezer leest de volledige linktekst voor. Een te lange linktekst is lastig te volgen. Een te korte linktekst (zoals één woord) geeft vaak te weinig informatie.
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 het icoon eruit als schakels in een ketting.
In WordPress ziet dit er zo uit:
Links die niet naar een andere pagina gaan
Sommige links gaan niet naar een andere webpagina, maar starten een actie. Denk aan een e-mailadres, een telefoonnummer of een bestand om te downloaden. Maak in die gevallen duidelijk wat er gebeurt als iemand op de link klikt.
- Links naar bestanden: Vermeld het bestandstype en de bestandsgrootte in de linktekst. Schrijf dus niet alleen “Download”, maar “Download Jaarverslag 2024.pdf, 2,1 MB”.
- Links naar een e-mailadres: Toon het volledige e-mailadres als linktekst. Schrijf dus niet alleen “E-mail ons”, maar “Mail ons op info@voorbeeld.nl”.
- Links naar een telefoonnummer: Toon het volledige telefoonnummer als linktekst. Schrijf dus niet alleen “Bel ons”, maar “Bel de klantenservice: +31 314 00 00 00”.
Links in een nieuw venster openen
Open links bij voorkeur niet in een nieuw venster of tabblad. Dit is verwarrend voor veel mensen en de Terug-knop van je browser werkt niet meer in het nieuwe tabblad. Dat is vooral lastig voor mensen met een cognitieve beperking en mensen die een schermlezer gebruiken. Een schermlezer meldt namelijk niet (automatisch) dat er een nieuw venster is geopend.
Open een link alleen in een nieuw venster als dat echt nodig is. Bijvoorbeeld als iemand een formulier invult en tussendoor een hulppagina wil raadplegen. Waarschuw in dat geval altijd de gebruiker. Dit kan op verschillende manieren:
Zichtbare tekst in de link:
<a href="https://voorbeeld.nl" target="_blank">
Voorbeeld (opent in nieuw tabblad)
</a>Of met visueel verborgen tekst:
<a href="https://voorbeeld.nl" target="_blank">
Voorbeeld
<span class="sr-only">(opent in nieuw tabblad)</span>
</a>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>Een <a>-element zonder href-attribuut is niet interactief. Het is dan niet bereikbaar met het toetsenbord en niet klikbaar. Gebruik altijd een href-attribuut.
Lees meer over de toegankelijke naam
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. Beschrijf in het tekstalternatief het doel van de link, niet wat er op de afbeelding staat.
<a href="https://wcag.nl">
<img src="logo-wcag.jpg" alt="WCAG.nl">
</a>Staat er naast de afbeelding ook tekst in dezelfde link? Gebruik dan een leeg alt-attribuut (alt=""). De tekst is dan al de linktekst. Zo voorkom je dat een schermlezer dubbele informatie voorleest.
<a href="/componenten">
<img src="thumbnail.jpg" alt="">
Componenten bekijken
</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
- tekst in een tabelcel met een gekoppelde tabelkop
- het
aria-describedby-attribuut - het
title-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;
}Let op: het title-attribuut is niet zichtbaar op apparaten met een touchscreen. Informatie in het title-attribuut wordt ook niet door alle schermlezers voorgelezen. Gebruik het title-attribuut daarom alleen als aanvulling, nooit als enige manier om context te bieden.
Links en knoppen
Links en knoppen zijn allebei interactieve elementen, maar ze hebben een ander doel. Een link (<a>) verwijst naar een locatie: de URL verandert. Een knop (<button>) voert een actie uit: de URL verandert niet. Stel jezelf de vraag: ga ik ergens naartoe of doe ik iets?
Het verschil is belangrijk voor mensen die hulptechnologieën gebruiken. Een schermlezer kondigt “link” of “knop” aan. Daar horen verschillende verwachtingen bij. Een link activeer je met Enter. Een knop activeer je met Enter én Spatie.
Vermijd daarom deze code:
<a href="#">gebruiken voor een actie (de link gaat nergens naartoe).<a href="javascript:void(0)">gebruiken (de link gaat nergens naartoe ).- Een
<div>of<span>met een klik-event gebruiken als link (niet bereikbaar met toetsenbord, geen rol, geen naam).
Vereisten en aanbevelingen voor toegankelijke links
Dit zijn de vereisten en aanbevelingen voor het schrijven van een goede linktekst:
WCAG-vereisten
- Zorg dat de linktekst het doel van de link beschrijft, eventueel samen met de context van de link.
- Zorg dat links die naar hetzelfde linkdoel verwijzen steeds dezelfde linktekst hebben.
Aanbevolen
- Gebruik geen teksten zoals “link:” of “link naar..” in de linktekst.
- Zet belangrijke woorden vooraan in de linktekst.
- 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.
- Vermeld het bestandstype en de grootte als de link naar een bestand gaat (bijvoorbeeld: “Jaarverslag 2024.pdf, 2,1 MB”).
- Waarschuw bezoekers als een link een nieuw venster of tabblad opent.
Gerelateerd succescriterium
Dit artikel behandelt het WCAG-succescriterium 2.4.4 Linkdoel (in context) (niveau A).