Toegankelijke links

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. Dat kan de naam van de pagina zijn (zoals “Contactpagina” of “Artikelen”) of de naam van een organisatie of product waar de link meer informatie over geeft​​​​​​​​​​​​​​​​.

Gebruik 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. Één woord is vaak te weinig, een volledige zin is vaak te veel.

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:

Consistente linkteksten

Gebruik dezelfde linktekst voor links die naar hetzelfde doel verwijzen. Noem je een link op de ene pagina “Profiel” en op een andere pagina “Mijn account”, dan is dat verwarrend. Vooral voor mensen die een schermlezer gebruiken en door linklijsten navigeren. Succescriterium 3.2.4 Consistente identificatie vraagt om consistente benamingen door je hele website.​​​​​​​​​​​​​​​​

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 is alleen bereikbaar met het toetsenbord als het een niet-leeg href-attribuut heeft. Een <a> zonder href is niet focusbaar en wordt door schermlezers ook niet als link aangekondigd.

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 omliggende 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

<a href="/tekstalternatieven"​>
  Lees meer <span class="sr-only"​>over tekstalternatieven</​span​>
</​a​>

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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.

Zet de omschrijving bij voorkeur vóór de link. Zo hoort een schermlezergebruiker de context voordat ze de link activeren.

Links onderscheiden van tekst

Gebruik nooit alleen kleur om een link te onderscheiden van de omliggende tekst. Mensen die kleurenblind zijn of een beperkt kleurenzicht hebben, zien het verschil anders of helemaal niet. Dat is een vereiste uit succescriterium 1.4.1 Gebruik van kleur.

Er zijn twee manieren om hieraan te voldoen:

1. Zorg dat links zich onderscheiden met meer dan alleen kleur, zoals een onderstreping. Dit is de meest robuuste oplossing en werkt voor iedereen direct zichtbaar.
2. Zorg dat de linkkleur minimaal een contrastverhouding van 3:1 heeft met de omliggende tekst. Voeg dan ook een extra visuele indicator toe bij hover of focus, zoals een onderstreping of een omlijning.

Browsers tonen links standaard blauw en onderstreept. Als je dat aanpast in je huisstijl, controleer dan of de link nog steeds duidelijk herkenbaar is zonder kleur.

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 het linkdoel duidelijk wordt uit de linktekst, of eventueel de linktekst samen met de omliggende context.
• Zorg dat links met dezelfde linktekst ook naar hetzelfde linkdoel verwijzen. Als dat niet zo is, maak dan duidelijk uit de context of de linktekst zelf wat het verschil is.
• Zorg dat links die naar hetzelfde linkdoel verwijzen steeds (ongeveer) dezelfde linktekst hebben.
• Zorg dat links minimaal op 2 manieren te onderscheiden zijn van gewone tekst.

Aanbevolen

• Gebruik geen teksten zoals “link:” of “link naar..” in de linktekst.
• Zet belangrijke woorden vooraan in de linktekst.
• 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) en raakt aan succescriterium 1.4.1 Gebruik van kleur (niveau A) en 3.2.4 Consistente identificatie (niveau AA).