Ga naar hoofdinhoud

WCAG

WCAG-succescriterium 2.4.4 Linkdoel (in context)

Niveau A

W3C referenties

Uitleg

De linktekst vertelt eenduidig aan de gebruiker waar de link naar toe gaat (het linkdoel).

Wat is een linktekst? Het is de tekst die zichtbaar is, maar ook de tekst die aan een gebruiker van hulpsoftware wordt voorgelezen.

Wat is het linkdoel? De locatie waar de link naartoe gaat. Bijvoorbeeld de contactpagina, een nieuwsbericht, een andere website of een download van een document.

Wat betekent In context? Het doel van de link kan ook door omringende content worden aangegeven. Dit moet dan wel ook voor gebruikers van hulpmiddelen duidelijk zijn, bijvoorbeeld door aanvullende tekst of een afbeelding naast de link. Dit laatste is onderwerp van veel discussie. Het beste is om altijd goed in de linktekst zelf te vertellen want het doel is.

Let op: Een linktekst wordt voor dit succescriterium niet afgekeurd als de betekenis voor alle gebruikers onduidelijk is. Wat natuurlijk niet wegneemt dat dit voor iedereen een slechte gebruikerservaring is.

Een eenduidige tekst is belangrijk voor alle gebruikers, zodat ze goed weten wat er gebeurt bij het aanklikken van een link. Screenreadergebruikers kunnen een lijst van alle links op een pagina oproepen en zo snel door de website navigeren, maar dan moeten de linkteksten wel onderscheidbaar zijn.

Het kan overduidelijk zijn waar een link heen gaat, maar soms is meer context nodig. Zijn er veel links met dezelfde linktekst op een pagina? Maak dan onderscheid tussen de linktekst door het toevoegen van meer informatie.

Voor ziende gebruikers kan duidelijk zijn waar een "Lees meer" link naar toe gaat, als deze linktekst onder een korte samenvatting staat. Om het voor screenreadergebruikers ook duidelijk te maken waar de link naar toe gaat kan er extra tekst worden toegevoegd die onzichtbaar, maar wel hoorbaar is.

Dit kan door gebruik te maken van CSS-classes zoals .sr-only of .screen-reader-text.

In code:

<a href="url">Lees meer<span class="sr-only"> over warmtepompen</a>.

Of door het toevoegen van een aria-label aan de link.

In code:

<a href="url" aria-label="Lees meer over warmtepompen">Lees meer</a>.

Ook in tekstparagrafen is een duidelijke linktekst belangrijk. Vergelijk de scanbaarheid en duidelijkheid van de volgende twee voorbeelden.

‘Klik hier’ is de slechtste linktekst die er is. Alle gebruikers moeten eerst de hele zin lezen om te weten waar de link naar toe gaat. Specifiek voor gebruikers met een screenreader die een lijst van links opvragen is het zeer onduidelijk als er één of meer keer ‘Klik hier’ in die lijst staat. De linktekst ‘de Waddenzee’ voor een link naar informatie over de Waddenzee werkt juist heel goed. De linktekst schept hier een verwachting die goed aansluit bij het linkdoel. Vermijd ook het linken van een hele URL, zoals in 'Lees verder op https://nl.wikipedia.org/wiki/Waddenzee'.

In de blogpost The perfect link staan uitgebreid voorbeelden en toepassingen van goede linkteksten.

Bronnen

Gebruikersonderzoek

Heb je gebruikersonderzoek gedaan dat betrekking heeft op dit succescriterium en wil je dit delen? Kijk eens bij Gebruikersonderzoeken delen op gebruikersonderzoeken.nl.

Hoe te testen

Goede tools voor het controleren voor dit succescriterium:

Controleer de linkteksten:

  • Heeft de link een toegankelijke naam?
  • Beschrijft de linktekst duidelijk en eenduidig het linkdoel, of kan dit doel uit de omringende content worden begrepen?
  • Is de linktekst en het linkdoel ook door gebruikers van hulpmiddelen te begrijpen?

Veelgemaakte fouten

Fout: De hele inhoud van een card/teaser/tile is de linktekst

Om een card/teaser/tile helemaal te linken wordt er een link om de hele inhoud gezet. Dit leidt tot een onleesbare linktekst voor screenreadergebruikers.

<!-- Foute code, niet gebruiken -->
<a href="url">
  <img src="url" alt="Tulpen" />
  <h3>Wanneer bloeien tulpen?</h3>
  <p>
    Op welk moment bloeien tulpen precies en waar kun je de prachtigste tulpenvelden vinden? Ontdek hier alles over de
    lentepracht van Nederlandse bloemen <span>Lees meer ... </span>
  </p>
</a>

De linktekst wordt dan: ‘Tulpen Wanneer bloeien tulpen? Op welk moment bloeien tulpen precies en waar kun je de prachtigste tulpenvelden vinden? Ontdek hier alles over de lentepracht van Nederlandse bloemen. Lees meer ...’

Deze constructie om een card te linken is een ramp om naar te luisteren met een screenreader.

Mogelijke oplossingen:

Florian Schroiff beschrijft hoe een card aanklikbaar te maken via CSS met een pseudo-element link overlay. In de YouTube video What makes an accessible card? onderzoekt Rian Rietveld de manieren om een card zo toegankelijk mogelijk te maken.

Een link naar de voorpagina die een afbeelding van het logo bevat in de header is een bekend patroon. Een veel voorkomende fout is bijvoorbeeld de alt-tekst ‘Logo gemeente Voorbeeld’. De alt-tekst beschrijft de afbeelding. Maar de alt tekst is hier ook de toegankelijke naam van de link. In code:

<!-- Dit is fout, niet gebruiken -->
<a href="link-url">
  <img src="img-url" alt="Logo gemeente Voorbeeld" />
</a>

De toegankelijke naam van de link is in dit geval de alt-tekst en de linktekst wordt dus ‘Logo gemeente Voorbeeld’. Dit is geen goede toegankelijke naam. De naam beschrijft niet waar de link naar toe gaat.

Een goede oplossing is de alt-tekst te wijzigen in ‘Gemeente Voorbeeld logo, naar de homepagina’.

<a href="link-url">
  <img src="img-url" alt="Gemeente Voorbeeld logo, naar de homepagina" />
</a>

Dan vertel je wat er op de afbeelding staat en waar de link naar toe gaat. VoiceOver leest dit voor als: ‘Link, afbeelding, Gemeente Voorbeeld logo, naar de voorpagina’.

Aanvullingen of opmerkingen?

Deze pagina's over WCAG worden onderhouden door het NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.