Alt-tekst bij een afbeelding: zó doe je dat

Werk je aan communicatie en content? Dan heb je vast wel eens gehoord van ‘alt-tekst’, of alternatieve tekst. Maar wat is het? Waarom vul je deze in? En minstens zo belangrijk: wát is een goede alt-tekst? Tijd voor een stoomcursus. 

Alt-tekst is de beschrijvende tekst die je invult bij een afbeelding. Alt-tekst is niet een toevoeging op je afbeelding, maar een vervanging ervan. Op je website, in een nieuwsbrief en bij afbeeldingen op social media. Deze tekst wordt getoond en voorgelezen als een afbeelding niet zichtbaar is. 

Waarvoor je alt-tekst moet invullen 

Denk trouwens bij afbeeldingen niet alleen aan de afbeelding die jij bovenaan of midden in je blog of pagina gebruikt. Denk ook aan de headerfoto op je website of je logo. En aan de header en footer van je nieuwsbrief. En weet dat zelfs pijltjes of buttons en knoppen worden voorgelezen. 

Waarom je alt-tekst moet invullen  

Allereerst omdat blinden en slechtzienden je afbeelding niet of slecht zien. Zij gebruiken hulpprogramma’s die tekst voorlezen of omzetten in braille. De alt-tekst wordt ook voorgelezen (of getoond op de brailleleesregel), daardoor krijgen blinden en slechtzienden ook mee wat er op een afbeelding staat.  

Daarnaast is alt-tekst het alternatief als een afbeelding niet goed wordt geladen. Dan wordt de alt-tekst van je afbeelding getoond, met daarvoor een klein vakje met een rood kruisje erin. 

Tot slot kunnen zoekmachines je plaatje niet ‘zien’. Zoekmachinerobots indexeren je website en nemen daarin ook de afbeeldingen mee. Als er geen alt-tekst is meegegeven aan de afbeelding, weten de robots niet wat er op je afbeelding staat en wordt deze overgeslagen. Door ook goede zoekwoorden aan je afbeelding mee te geven kan de zoekmachinerobot je afbeelding ook indexeren en helpt dit zelfs mee in de zoekmachineoptimalisatie (SEO) van je website. 

Let op! Dan moeten deze zoekwoorden wél passen bij de afbeelding. Alleen zoekwoorden toevoegen als SEO-trucje is dus niet slim. 

Alt-tekst voor decoratieve afbeeldingen 

Is een afbeelding puur decoratief? Dan hoef je geen uitgebreide alt-tekst mee te geven. De wensen van mensen met een visuele beperking rond alt-teksten lopen uiteen. Een deel waardeert het toevoegen van alt-tekst aan foto’s, ook als dit geen extra of juist dubbele informatie geeft. Er ontstaat dan een completer beeld van de webpagina. Anderen vinden het prima als je alleen ‘Decoratief’ als alt-tekst meegeeft. 

Voor de duidelijkheid: met decoratieve afbeeldingen bedoelen we afbeeldingen die geen informatie toevoegen aan de pagina. Deze informatie is bijvoorbeeld al in de omliggende tekst verwerkt, zoals bij iconen. Ook afbeeldingen die gebruikt worden voor sfeer of ‘visuele opvulling’ vallen hieronder. 

Volgens het World Wide Web Consortium (W3C) dient een decoratieve afbeelding alleen een esthetisch doel, geeft het geen informatie en heeft het geen functionaliteit. 

Alt-tekst voor informatieve afbeeldingen 

Soms heb je complexe afbeeldingen, grafieken en diagrammen. Voor deze illustraties is een volledige beschrijving in de alt-tekst belangrijk. Deze mag best aan de lange kant zijn. Maar als de data uit de grafiek verderop in de tekst of op je website beschreven staat, kun je beter daarnaar verwijzen. Je kunt dan bijvoorbeeld de alt-tekst ‘Dit is een grafiek van de verdeling van de functies van ons personeel. Verderop in de tekst/Op onze website vind je alle informatie uitgeschreven.’ Je kunt dan de link naar de website toevoegen. 

Alt-tekst op social media 

Bij de meeste sociale netwerken kun je alt-tekst aan een afbeelding meegeven. Deel je een link in een socialmediabericht? De afbeelding en tekst in een preview ziet een screenreader niet (altijd). Die afbeelding, die soms ook van een externe website komt hoeft dus niet per se een alt-tekst mee te krijgen. Denk er wel aan dat de screenreader dus niet de titel of dat plaatje in de preview ziet. Neem daarom de belangrijke zaken mee in de begeleidende tekst in je bericht of post op social media, in plaats van alleen link. 

Alt-tekst zonder ‘afbeelding/foto van’ 

Een screenreader geeft zelf aan dat het om een afbeelding gaat. Termen als ‘Afbeelding van …’ of ‘Foto van …’ zijn daarom overbodig. Voor jouw beeld: dan leest de screenreader bijvoorbeeld ‘Afbeelding van foto van Victor Zuydweg’ voor. 

In sommige gevallen, als het echt iets toevoegt, kun je aangeven dat een afbeelding bijvoorbeeld een tekening of schets is. 

Lengte alt-tekst 

De ideale lengte voor een alt-tekst? Zo kort als mogelijk, maar zo lang als nodig. Het hoeft niet zo uitgebreid met alle details, maar het hoeft ook niet heel summier. Het is wel goed om te weten dat sommige software maar maximaal 150 tekens in een alt-tekst kan lezen. Maar voor de rest geldt: de ideale lengte is afhankelijk van de context. Wat voor type afbeelding is het (decoratief of informatief)? En hoeveel informatie staat er op de rest van de pagina? 

Voorbeeld 1 

Een foto met de nieuwe bestuurders van het waterschap Hollandse Delta: moet je daar alle namen bij zetten of voldoet ‘De nieuwe bestuurders’? Noem je verderop in de tekst al alle namen van de nieuwe bestuurders? Dan is het niet heel relevant in welke volgorde en wie er allemaal op de foto staan. De alt-tekst mag dan zijn: ‘De nieuwe bestuurders van waterschap Hollandse Delta. Verderop in de tekst/onder kop X/op de website staan de namen.’ 

Voorbeeld 2 

Je kunt hier als alt-tekst ‘Een park’ gebruiken. Of: ‘Decoratief’. Maar ik kan ook dit als alt-tekst gebruiken: ‘Park met een pad. Vooraan staat een boom met een fiets er tegenaan. De boom staat in bloei. De zon schijnt. En op de achtergrond spelen kinderen en staan ouders te kijken’.

Voorbeeld 3 

Deze afbeelding is de visual van de conferentie van Gebruiker Centraal, er staat ook tekst op. Hiervoor kan ik als alt-tekst gebruiken: ‘Visual met aankondiging van de conferentie’. 

Ik kan ook als alt-tekst gebruiken: ‘Aankondiging van de conferentie van Gebruiker Centraal met als thema ‘Uit het doolhof!’, op vrijdag 6 oktober 2023 in de Arendshoeve in Aalsmeer. De achtergrond is groen, links staat het beeldmerk van de conferentie (een rond doolhof met daarin het poppetje uit het logo van Gebruiker Centraal met een verrekijker). Onderaan staat het logo van Gebruiker Centraal met 3 verschillende poppetjes en de tekst ‘Gebruiker Centraal: Voor een gebruiksvriendelijke overheid’.’

Maar waarschijnlijk is een betere alt-tekst: ‘Aankondiging van de conferentie Gebruiker Centraal op 6 oktober. Meer informatie en aanmelden kan op de website van Gebruiker Centraal‘

Belangrijk: denk aan het doel 

Tot slot: houd bij het schrijven van een alt-tekst altijd in je achterhoofd dat het nuttig moet zijn voor iemand die de afbeelding niet goed kan zien. Denk dus altijd goed na over het doel en de context van de afbeelding. 

Deze afbeelding kun je bijvoorbeeld omschrijven als: ‘Een driehoek met een gele achtergrond, zwarte rand en zwart uitroepteken’. Maar waarschijnlijk gebruik je de afbeelding om iemand daadwerkelijk te waarschuwen. De alt-tekst ‘Waarschuwing!’ is in dit geval veel treffender. 

Tip! Stel je eens voor dat jij naast een blinde zit en beschrijft wat er op jouw foto staat. Wat is de belangrijkste boodschap van je afbeelding die je mee wilt geven aan deze persoon?

Meer over Begrijpelijke tekst en beeldtaal, Inclusie en digitale toegankelijkheid