Home > Aan de slag > Afbeeldingen en alternatieve tekst

De meeste toegankelijkheidsproblemen ontstaan met afbeeldingen. Immers, hoe begrijpt iemand die een afbeelding niet kan zien de betekenis van een afbeelding? Het antwoord is tekst, de basis van toegankelijke informatie.

Inhoudsopgave

Voor wie zijn alternatieve teksten bedoeld?

Dit hoofdstuk gaat over het schrijven van teksten die als alternatief dienen voor bezoekers die geen afbeeldingen zien:

  • Blinde bezoekers (en andere gebruikers van spraakbrowsers en brailleregels)
  • Bezoekers die afbeeldingen hebben uitgeschakeld
  • Bezoekers met trage verbindingen (waarvoor afbeeldingen langzaam laden)
  • Gebruikers van tekstbrowsers
  • Zoek-spiders

“Provide a text equivalent for every non-text element (e.g., via alt, longdesc, or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), (…) images used as list bullets, spacers, graphical buttons (…).”

W3C Web Content Accessibility Guidelines ijkpunt 1.1

Naar boven


De theorie van alternatieve tekst

Het alt attribuut

Alternatieve teksten worden geplaatst in het alt attribuut. Het alt (alternative) attribuut is een van de verplichte attributen op het img (image) element. Het is daarnaast ook toe te passen op het area element (voor image maps) en het input element (bij het gebruik van afbeeldingen voor formulierknoppen).

Wanneer een alt attribuut op een van bovengenoemde elementen is toegepast, wordt de waarde ervan (de alternatieve tekst - ook wel alt-tekst genoemd) weergegeven wanneer de afbeelding niet wordt getoond. Meer informatie over het alt attribuut bij R-pd.7.1: Het alt (alternative) attribuut dient te worden gebruikt op ieder img (image) en area element en dient te worden voorzien van een effectieve alternatieve tekst.

Het longdesc attribuut en d-links

Het longdesc (long description) attribuut kan worden toegepast op het img (image) element en bevat een URL naar een apart document. In dit document wordt een uitgebreide beschrijving van de afbeelding geplaatst. Er kan in dit document HTML worden gebruikt voor kopregels, paragrafen, enzovoorts; iets wat niet mogelijk is in een alt attribuut. Meer informatie bij Het longdesc attribuut en d-links.

Naar boven


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)

  1. <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.

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)

  1. <img alt="Rode knop" ...>
  2. <img alt="Groen bolletje" ...>
  3. <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)

  1. <img alt="Versturen" ...>
  2. <img alt="" ...>

Misbruik van het alt attribuut

Tekst tijdens het downloaden van afbeeldingen (HTML)

  1. <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.

Naar boven


Alternatieve tekst in de praktijk

Specifieke voorbeelden van het gebruik van alternatieve tekst zijn op aparte pagina's beschreven:

Naar boven


Gerelateerde richtlijnen

De volgende richtlijnen gaan dieper in op het gebruik van alternatieve tekst.

  • R-pd.7.1: Het alt (alternative) attribuut dient te worden gebruikt op ieder img (image) en area element en dient te worden voorzien van een effectieve alternatieve tekst.
  • R-pd.7.2: Gebruik geen alt attribuut voor het oproepen van tooltips.
  • R-pd.7.3: Gebruik geen d-links op websites. Het gebruik van het longdesc (long description) attribuut verdient de voorkeur wanneer de alternatieve tekst op het alt attribuut ontoereikend is voor het begrip van de informatie in de afbeelding.
  • R-pd.7.4: Afbeeldingen die staan geplaatst binnen een link dienen een niet-lege alternatieve tekst te hebben om bezoekers die de afbeelding niet zien in staat te stellen de link te volgen.
  • R-pd.7.5: Geef bij het gebruik van image maps voor zowel het img element als ieder area element een effectieve alternatieve tekst aan via het alt attribuut.
  • R-pd.7.6: Decoratieve afbeeldingen dienen zoveel mogelijk door CSS geplaatst te worden. Informatieve afbeeldingen dienen door HTML geplaatst te worden.
  • R-pd.7.7: Het gebruik van CSS Image Replacement technieken die worden toegepast op essentiële informatie wordt afgeraden.

Naar boven


Naar boven