U bent hier:

  1. Handleiding
  2. Ontwikkeling
  3. Afbeeldingen
  4. Het alt attribuut
  5. Effectieve teksten

Afbeeldingen en alternatieve tekst: Het schrijven van effectieve alternatieve teksten

Een effectieve alternatieve tekst is een tekst die gelezen kan worden in plaats van de afbeelding, zodat de informatie die met de afbeelding wordt overgebracht niet verloren gaat.

Dit betekent soms (maar lang niet altijd) dat een alternatieve tekst een beschrijving is van de afbeelding Bij een knop met een pijl naar rechts die de volgende stap in een serie aangeeft, is de alternatieve tekst “Volgende stap” effectiever dan “Grijze knop met zwarte pijl naar rechts”.

Lege alternatieve tekst

Soms is zelfs een lege alternatieve tekst effectief. Bijvoorbeeld voor decoratieve afbeeldingen of wanneer de functie of omschrijving van de afbeelding in de normale tekst al voorkomt, zoals in onderschriften.

Voorbeeld van een lege alternatieve tekst (HTML)

<img src="image.gif" alt="">

Hoe schrijf je een alternatieve tekst?

Een goede methode om alternatieve teksten te schrijven, is proberen u voor te stellen dat u de inhoud van de pagina aan iemand voorleest.

Er is geen eenduidige regel te geven voor hoe een alternatieve tekst eruit moet zien; het hangt af van de context waarin de afbeelding staat. Deze context wordt duidelijk als de webontwikkelaar de website test met een tekstbrowser, zoals Lynx. Afbeeldingen – maar ook andere grafische effecten, zoals kleur en lettertypes – worden in deze browser niet weergegeven. In plaats van afbeeldingen worden de respectievelijke alternatieve teksten getoond. De webontwikkelaar kan zo zien of de alternatieve tekst moet worden aangepast om de pagina-inhoud te kunnen begrijpen of gebruiken.

Voor de meeste situaties zal een paar regels alternatieve tekst voldoende zijn. Sommige browsers zullen – wanneer afbeeldingen niet worden getoond – alternatieve tekst van een bepaalde lengte of lettergrootte afkappen of niet eens afbeelden. Het besluit om wel of geen alternatieve tekst te gebruiken, hoeft hier niet vanaf te hangen. Immers, zonder alternatieve tekst is er ook niets zichtbaar.

Soms is het linken naar een apart document met een lange beschrijving wenselijker; hiervoor is het longdesc attribuut beschikbaar. Het longdesc attribuut vormt een aanvulling op het alt attribuut.

In Alternatieve tekst in de praktijk worden adviezen gegeven over alternatieve teksten voor specifieke soorten afbeeldingen.

Links en referenties

Informatie en illustratie

Een afbeelding is zelden het onderwerp van een webpagina. Alleen in een fotogalerie heeft een afbeelding deze status: hier is de afbeelding de informatie. In vrijwel ieder ander geval is een afbeelding een bijdrage aan ‘het grote geheel’: het maakt de informatie op de pagina inzichtelijker. Zulke afbeeldingen illustreren.

Afbeeldingen die het onderwerp zijn

Afbeeldingen die zelf het onderwerp van de pagina zijn, hebben een alternatieve tekst die de inhoud van de afbeelding beschrijft. Zo heeft een foto in een fotogalerie een alternatieve tekst die verhaalt over grote drommen mensen met borden en spandoeken die zijn samengestroomd voor een protestactie op De Dam op een herfstachtige namiddag bij guur weer.

Omdat het essentieel is dat de bezoeker zich hier iets kan voorstellen bij de foto, is een beschrijving op zijn plaats.

Afbeeldingen die illustreren

Afbeeldingen die informatie op de pagina illustreren, bevatten alternatieve teksten die ondergeschikt zijn aan het doel van de informatie van de pagina. Deze alternatieve teksten hoeven niet volledig te zijn, zolang ze maar aansluiten bij het doel van de pagina.

Omdat de bezoeker niet de afbeelding zelf hoeft te doorgronden, maar de informatie op de pagina (waaraan de afbeelding bijdraagt), moet de alternatieve tekst niet beschrijvend, maar illustrerend zijn.

Zo kan de alternatieve tekst van een cartoon bij een artikel over het openbaar vervoer luiden “Illustratie: busreizigers beklagen zich dat ze op tijd op het werk zijn”. De omschrijving van de cartoon had veel langer kunnen zijn, maar toch minder effectief. Soms volstaat zelfs een lege alternatieve tekst. Zie ook Illustraties en onderschriften.

Voorbeelden van slechte alternatieve teksten

Slechte alternatieve teksten (HTML)

<img alt="Rode knop" ...>
<img alt="Groen bolletje" ...>
<img alt="Spacer" ...>

Deze alternatieve teksten zijn slecht omdat ze een beschrijving geven van de afbeelding die geen informatie toevoegt. Het is storend deze beschrijvingen te moeten lezen of aanhoren. De functie van de afbeelding is niet af te leiden uit de alternatieve tekst. De volgende alternatieve teksten zijn beter:

Betere alternatieve teksten (HTML)

<img alt="Versturen" ...>
<img alt="- " ...>
<img alt="" ...>

Misbruik van het alt attribuut

Tekst tijdens het downloaden van afbeeldingen (HTML)

<img alt="Bezig met laden" ...>

Deze alternatieve tekst wordt door sommige webontwikkelaars gebruikt om aan te geven dat een (grote) afbeelding nog niet compleet gedownload is. Deze truc wordt sterk afgeraden: dergelijke alternatieve teksten zeggen immers niets over de inhoud van de afbeelding of de functie ervan.


 Webrichtlijnen versie 1.3, november 2007.