Wcag uitgelegd

URL als linktekst

URL als linktekst. WCAG 2.4.4 Linkdoel (in context) (post 2/14)

“h-t-t-p-s colon slash slash w-w-w dot example dot com slash rapport dash twee-duizend-vierentwintig dot p-d-f”

Dat is wat een schermlezer voorleest als je een kale URL als linktekst gebruikt. Karakter voor karakter. Of als een onbegrijpelijke woordenbrij.

<!-- Niet doen -->
<a href="https://www.example.com/rapport-2024.pdf">
  https://www.example.com/rapport-2024.pdf
</a>

<!-- Wel doen -->
<a href="https://www.example.com/rapport-2024.pdf">
  Jaarrapport 2024 (PDF, 2,3 MB)
</a>

Waarom doen mensen dit?

Vaak uit gemakzucht. Copy-paste van de URL. Of het CMS vult de linktekst automatisch met de URL. Of iemand denkt dat de URL “transparant” is: je ziet waar je naartoe gaat.

Maar een URL is geen beschrijving. “/rapport-2024.pdf” zegt iets. “/doc/r24-final-v3-NL.pdf” zegt niets.

De bonus: vermeld het bestandstype en de grootte bij downloads. Je bezoeker verwacht een webpagina. Een PDF die ineens opent is verwarrend.

Related Posts

Invoerveld zonder zichtbare rand

Invoerveld zonder zichtbare rand

Een wit invoerveld op een witte achtergrond. Met een lichtgrijze rand. Heel lichtgrijs. #D9D9D9.

Knop die navigeert, link die een actie uitvoert

Knop die navigeert, link die een actie uitvoert

“Contact, knop.” Je drukt op Enter. Een nieuwe pagina opent. Maar het was een knop. Knoppen voeren acties uit. Ze navigeren niet.

Mouseover zonder focus-equivalent

Mouseover zonder focus-equivalent

Je hovert over een tekst. Een tooltip verschijnt. Handige extra informatie.