Wcag uitgelegd

"Lees meer"

"Lees meer": WCAG 2.4.4 Linkdoel (in context) (post 1/14)

Lees meer. Lees meer. Lees meer. Lees meer. Lees meer.

Dat hoort een schermlezergebruiker die door de links op je pagina navigeert. Vijf links. Allemaal “Lees meer.” Geen idee waar ze naartoe gaan.

Dit is de meest voorkomende linkfout op het web. En de makkelijkste om te voorkomen.

Het probleem: de link staat onder een artikel, los van de tekst. Een schermlezer die door de links springt (VoiceOver: VO+U, NVDA: Insert+F7) ziet alleen de linktekst. Niet de kop erboven. Niet de alinea ernaast.

<!-- Niet doen: link zonder context -->
<p>We hebben een nieuw retourbeleid.</p>
<a href="/retourbeleid">Lees meer</a>

<!-- Wel doen: link in de tekst -->
<p>We hebben een nieuw <a href="/retourbeleid">retourbeleid</a>.
   Lees de volledige voorwaarden.</p>

Andere boosdoeners: “Klik hier”, “Meer info”, “Hier”, “Dit”, “Meer”.

De vuistregel: als je alle context van de pagina weghaalt en alleen de linktekst overhoudt, moet je nog steeds begrijpen waar de link naartoe gaat.

Open de linkslijst van je schermlezer. Hoeveel keer staat er “Lees meer”?

Related Posts

Focus springt onverwacht door de pagina

Focus springt onverwacht door de pagina

Tab. Je bent in het hoofdmenu. Tab. Je bent in de sidebar. Tab. Je bent terug in het hoofdmenu. Tab. Nu ben je in de content.

Paginatitel ontbreekt

Paginatitel ontbreekt

Je opent een pagina. De schermlezer zegt: “https colon slash slash w-w-w dot example dot com slash pagina dash 3-b dot html.”

Klikbare div in plaats van een button

Klikbare div in plaats van een button

Een div met een onclick. Ziet eruit als een knop. Doet iets als je erop klikt.