Campus Design System

Appearance

2.4.4 Doel van de link (In Context) niveau A ​

Uitleg ​

Het WCAG-criterium 2.4.4 Doel van de link (in context) vereist dat het doel van een link duidelijk is voor de gebruiker, zelfs als de link uit context wordt gepresenteerd. Dit is essentieel voor gebruikers die de webpagina met behulp van een schermlezer of toetsenbordnavigatie verkennen.

In dit geval moeten alle links zodanig worden gepresenteerd dat hun doel duidelijk is, zelfs wanneer ze uit hun oorspronkelijke context worden gehaald. Dit betekent dat het gebruik van alleen generieke tekst zoals “klik hier” of “meer info” niet voldoende is. Het doel van de link moet rechtstreeks duidelijk zijn, bijvoorbeeld door het gebruik van beschrijvende linkteksten.

Wat betekent dit in de praktijk? ​

Als een gebruiker naar een hyperlink navigeert, moet deze duidelijk aangeven wat de gebruiker kan verwachten door op de link te klikken. Dit is vooral belangrijk voor gebruikers die schermlezers gebruiken, omdat de linktekst voor hen wordt voorgelezen.

De bedoeling is om te voorkomen dat de gebruiker in de war raakt over wat er gebeurt als ze op een bepaalde link klikken, zonder voldoende context. Als een link bijvoorbeeld wordt vermeld in een lijst met links zonder dat het duidelijk is wat de link inhoudt, kan dit verwarring veroorzaken bij de gebruiker.

Oplossing voor dit probleem ​

Zorg ervoor dat de tekst van de link duidelijk en beschrijvend is. Gebruik geen vage zinnen zoals "klik hier" of "lees meer", maar geef de gebruiker een duidelijk idee van wat er zal gebeuren als ze op de link klikken. Als de link verwijst naar een andere pagina, zou de tekst van de link het onderwerp van die pagina moeten beschrijven.

Voorbeeld van het probleem ​

Stel je voor dat er een lijst met links is waarin de tekst van de link “Klik hier” staat, zonder context. Als een gebruiker op deze link klikt, weten ze niet wat ze kunnen verwachten.

html
<a href="https://example.com">Klik hier</a>

In dit voorbeeld is de linktekst niet beschrijvend genoeg. De gebruiker kan niet weten waar ze terechtkomen door op deze link te klikken.

Oplossing voor dit probleem ​

Zorg ervoor dat de linktekst de gebruiker vertelt wat ze kunnen verwachten als ze op de link klikken. Bijvoorbeeld:

html
<a href="https://example.com/over-ons">Lees meer over ons bedrijf</a>

In dit geval is de tekst "Lees meer over ons bedrijf" veel duidelijker, omdat de gebruiker nu weet dat de link hen naar een pagina over het bedrijf zal leiden.

Voorbeeld met context ​

Als een link zich in een context bevindt, zoals in een lijst of een complexe interface, moet het doel van de link nog steeds duidelijk zijn. Dit kan bijvoorbeeld door een beschrijvende link te gebruiken in combinatie met andere inhoud. Hier is een voorbeeld van een link in een lijst:

html
<ul>
  <li><a href="https://example.com/faq">Bekijk onze veelgestelde vragen</a></li>
  <li><a href="https://example.com/contact">Neem contact met ons op</a></li>
</ul>

In dit geval is het voor een gebruiker met een schermlezer duidelijk wat de link doet, omdat de tekst beschrijft waar de gebruiker naartoe zal worden geleid.

Belangrijke overwegingen ​

  • Gebruik duidelijke en beschrijvende linkteksten: Vage termen zoals “klik hier” moeten vermeden worden. Linkteksten moeten altijd het doel van de link weerspiegelen.
  • Vermijd contextverlies: Als de link zich in een complexere context bevindt, zoals een formulier of een lijst, moet het nog steeds duidelijk zijn wat het doel van de link is, ook zonder visuele context.
  • Gebruik van ARIA-labels: In sommige gevallen, zoals wanneer de link alleen een afbeelding is, kan een ARIA-label helpen om het doel van de link duidelijker te maken.

Tools en Hulpmiddelen ​

  • WAVE Accessibility Tool: Deze tool kan helpen bij het controleren van de linkteksten en of het doel van de link duidelijk is. WAVE Tool.
  • aXe Accessibility Tool: Dit is een handige tool voor het testen van toegankelijkheidsrichtlijnen, inclusief die voor het gebruik van duidelijke linkteksten. aXe Tool.

Referenties ​