5 tips voor toegankelijke links

Een organisatie die een toegankelijke website als doel heeft, moet ook de links volgens de richtlijnen van WCAG gebruiken. Door deze 5 tips te volgen, zorg je dat de links op jouw website of de website van jouw organisatie, toegankelijk zijn voor de bezoekers die gebruik maken van hulptechnologieën zoals voorleessoftware of toetsenbord, en door de bezoekers die kleurenblind of slechtziend zijn. 

1. Gebruik een duidelijke linktekst

Toegankelijke links hebben een linktekst die direct vertelt waar de link naar verwijst. Op veel websites worden links als “klik hier” of “lees meer” gebruikt. Soms worden ze ook meerdere keren herhaald op een pagina. 

Bezoekers die gebruik maken van hulptechnologieën zoals voorleessoftware kunnen een lijst van alle links op een pagina gebruiken om sneller te navigeren. Een heldere linktekst is in dit geval heel belangrijk. “Lees meer over toegankelijkheid van links” is een duidelijkere link dan “Lees meer.” 

Toch is een link zoals “Lees meer” niet altijd direct fout. Het linkdoel van deze link kan begrepen worden uit de context van de link. Met de context bedoelen de richtlijnen:

  • Dezelfde zin of paragraaf
  • Dezelfde lijst-item
  • Dezelfde lijst-item samen met het direct bovenliggende lijst-item 
  • Dezelfde tabel cel
  • Dezelfde tabel cel samen met de bijbehorende tabel koppen
  • Een link gecombineerd met tekst buiten het scherm

2. Gebruik meer dan alleen kleur om een link in de tekst te markeren

Iedereen die een website bezoekt moet de beschikbare links kunnen waarnemen. Ook de bezoekers die slechtziend of kleurenblind zijn. Het is voor deze groep belangrijk dat de links gemakkelijk te onderscheiden zijn van de omringende tekst. Daarom is het beter om naast een andere kleur dan de omringde tekst ook een andere markering te gebruiken voor de links. De links kunnen bijvoorbeeld onderstreept of dikgedrukt zijn. Op deze manier zijn ze beter zichtbaar.

3. Zorg voor genoeg contrast tussen de link en de omringende tekst

Bezoekers die kleurenblind zijn kunnen de links die met kleur gemarkeerd zijn beter onderscheiden van de omringende tekst als er genoeg contrast is tussen deze twee kleuren. Het succescriterium 1.4.1 Gebruik van kleur hanteert voor deze links een contrastverhouding van minimaal 3:1. Een contrastverhouding kan gemeten worden met de Contrast Checker van WebAIM.

4. Geef een link kleur met voldoende contrast

In het ontwerpfase worden de kleuren voor de hele website bepaald. Het is belangrijk om voor de links een kleur te kiezen die genoeg contrast heeft met de achtergrondkleur van de pagina. De links moeten een contrastverhouding hebben van minimaal 4,5:1. Voor de links die 24 px zijn (of 18.5px dikgedrukt) is de minimale contrastverhouding 3:1. Deze links zijn dan beter zichtbaar voor de bezoekers die slechtziend of kleurenblind zijn.

5. Geef een link een focus indicator voor het navigeren met het toetsenbord

Sommige bezoekers gebruiken het toetsenbord in plaats van een muis om over de website te navigeren. Door het drukken op de TAB-toets verplaatsen ze zich tussen de links. Een goed zichtbaar kader om een link laat ze zien waar ze zich op dit moment op de pagina bevinden. De kleur van de focus indicator is in dit geval ook belangrijk. Zorg dat deze een contrastverhouding van 3:1 heeft met de achtergrondkleur van de pagina.

Meer weten?

Wil je meer weten over het toegankelijk schrijven en opmaken van links? Lees de artikelen “Teksten” en “Vormgeving” in de kennisbank.