Geef afbeeldingen die als link worden gebruikt een alt-tekst die het doel van de link beschrijft

Soms gebruik je niet een tekst maar een afbeelding als link naar een andere pagina. Zo zou je in plaats van de linktekst ‘volgende’ een plaatje van een pijl naar rechts kunnen gebruiken. Zorg in zo’n geval dat de alt-tekst van de afbeelding het doel van de link beschrijft.

Hoe pas ik dit toe?

Normaal gesproken moet de alt-tekst van een afbeelding beschrijven wat op de afbeelding te zien is. Maar als je een afbeelding als link gebruikt gelden andere regels. Bezoekers die de afbeelding niet kunnen zien gebruiken de alt-tekst namelijk als linktekst. Uit de alt-tekst maken zij op waar de link naartoe zal leiden. Om die reden is het belangrijker dat het doel van de link duidelijk wordt uit de beschrijving, dan wat exact op de afbeelding te zien is. Zo is ‘volgende pagina’ een betere alt-tekst dan ‘blauwe pijl naar rechts’, als het gaat om een afbeelding die wordt gebruikt als link naar een volgende pagina.

Let op: Dit geldt alleen in gevallen waarbij een losse afbeelding wordt gebruikt als link. Gebruik je naast de afbeelding ook nog een tekst, dan gelden andere regels.

Voorbeelden

Vorige en volgende

Een nieuwsarchief bevat onderaan de pagina links om door het archief te navigeren. De alt-teksten van de afbeeldingen die voor ‘vorige’ en ‘volgende’ worden gebruikt beschrijven het doel van de link (vorige/volgende), en niet wat op de afbeelding te zien is (pijlen).

<a href="archief/pagina-1.html">
  <img src="pijl-links.jpg” alt="Vorige pagina" />
</a>
<a href="archief/pagina-3.html">
  <img src="pijl-rechts.jpg" alt="Volgende pagina" />
</a>

Contactpagina

Een website gebruikt in het navigatiemenu een afbeelding van een envelop als link naar de contactpagina. De alt-tekst van de afbeelding beschrijft het doel van de link (contact) en niet wat op de afbeelding te zien is (witte envelop).

<a href="contact.html">
  <img src="envelop.jpg" alt="Contact" />
</a>

Hoe draagt dit bij aan een betere website?

Door deze werkwijze toe te passen zorg je dat afbeeldingen die als link worden gebruikt begrijpelijk zijn voor bezoekers die de afbeelding niet kunnen zien. Zo kunnen zij zonder problemen door de site navigeren.

Bouwer of redacteur?

Zowel de bouwer als de redacteur kunnen met deze regel te maken krijgen. Afbeeldingen die als link worden gebruikt kunnen voorkomen in structurele elementen van een website zoals het navigatiemenu, maar ook in de inhoud die de redacteur beheert.

Technische details