Zo schrijf je goede alt-tekst voor afbeeldingen

Waar alt-tekst voor is

Alt-tekst is het tekstalternatief van een afbeelding, geschreven in het alt-attribuut. Schermlezers lezen hem voor, brailleleesregels tonen hem, en de browser toont hem als de afbeelding niet laadt. Zoekmachines kunnen hem ook gebruiken. De webnorm voor toegankelijkheid, WCAG, vraagt om een tekstalternatief dat dezelfde functie heeft als de afbeelding (succescriterium 1.1.1, niveau A).

Het kernidee: alt-tekst is geen bijschrift, en geen beschrijving van de afbeelding om de beschrijving zelf. Hij zegt wat de afbeelding aan de pagina toevoegt. Dezelfde foto kan op twee pagina's een andere alt-tekst nodig hebben, of helemaal geen.

Vier soorten afbeeldingen

• Informatieve afbeeldingen voegen betekenis toe: een foto, een icoon naast een telefoonnummer, een diagram. Schrijf een korte alt-tekst die die betekenis overbrengt.
• Functionele afbeeldingen staan in links en knoppen. De alt-tekst noemt de actie of het doel, niet het plaatje: 'Zoeken' voor een vergrootglas, 'Deze pagina afdrukken' voor een printericoon.
• Decoratieve afbeeldingen voegen niets toe: een rand, een opvulling, een sierelement, of een afbeelding die alleen de tekst ernaast herhaalt. Geef ze een leeg alt-attribuut (alt=""), zodat schermlezers ze overslaan, of zet ze als achtergrond in het stylesheet.
• Afbeeldingen van tekst zijn een laatste redmiddel. Heb je er een nodig, dan herhaalt de alt-tekst de woorden in de afbeelding. Een logo dat geen link is, krijgt de naam van de organisatie.

Zo schrijf je een goede alt-tekst

1. 1Vraag je af waarom de afbeelding op de pagina staat. Wat zou een bezoeker missen als ze weg was?
2. 2Schrijf wat voor dat doel telt, in een woordgroep of in één zin.
3. 3Begin met de inhoud. Een schermlezer meldt meestal al dat iets een afbeelding is, dus 'afbeelding van' of 'foto van' helpt zelden.
4. 4Herhaal niet wat de tekst naast de afbeelding al zegt. Zegt die alles, dan is de afbeelding decoratief en krijgt ze een lege alt.
5. 5Lees de alt-tekst hardop zonder naar de pagina te kijken. Heeft hij op zichzelf betekenis?

Veelgemaakte fouten

• Helemaal geen alt-attribuut. Sommige schermlezers lezen dan de bestandsnaam voor.
• Een bestandsnaam of een code als alt-tekst, zoals 'IMG_2041.jpg'.
• Dezelfde reeks zoekwoorden op veel afbeeldingen. Alt-tekst is in de eerste plaats voor mensen.
• Een lange beschrijving van een puur decoratieve afbeelding.
• Het uiterlijk van een knopafbeelding beschrijven in plaats van de actie. Een zoekknop is niet 'vergrootglas', maar 'Zoeken'.

Hoe lang moet hij zijn?

WCAG 1.1.1 noemt geen aantal tekens. Het advies van het W3C is hem kort te houden, het liefst een woordgroep of een zin. Geef bij grafieken en andere complexe afbeeldingen de volledige informatie als tekst op de pagina en houd de alt-tekst kort. Heb je meer nodig dan een zin, dan draagt de afbeelding waarschijnlijk inhoud die in de paginatekst hoort.

Controleer je site

Om afbeeldingen zonder nuttige alt-tekst te vinden, draai je de gratis Alt-tekst checker op een pagina. Voor suggesties voor veel afbeeldingen gebruik je de tool Alt-teksten. Een automatische suggestie kan missen wat op je pagina telt, dus lees elke tekst en pas hem aan als hij niet bij het doel van de afbeelding past.

De tools van Do4U helpen met het typen, niet met de beslissing: of een afbeelding informatief, functioneel of decoratief is, weet jij het best. Controleer opnieuw na grote wijzigingen aan je site.