Alt-teksten schrijven: wanneer zijn ze nodig en wat zet je erin?
Inleiding
Alt-teksten schrijven lijkt eenvoudig, maar in de praktijk roept het vaak vragen op. Wanneer je in WordPress een afbeelding uploadt of plaatst, zie je het veld “alternatieve tekst”. Maar wat vul je daar in? Beschrijf je precies wat er op de afbeelding staat? Gebruik je een zoekwoord? Of mag je het veld ook leeg laten?
Niet elke afbeelding heeft alt-tekst nodig. Afbeeldingen die informatie overbrengen of een functie hebben, hebben een goede alt-tekst nodig. Denk aan een afbeelding die iets uitlegt, een knop met een icoon, een productfoto of een grafiek.
Afbeeldingen die alleen decoratief zijn, kun je meestal beter leeg laten voor hulpsoftware. Dat geldt bijvoorbeeld voor sfeerbeelden, patronen of stockfoto’s die niets extra’s vertellen. Een lege alt-tekst is dan geen fout, maar juist een bewuste keuze.
In dit artikel lees je wanneer alt-tekst nodig is, wanneer je die beter leeg laat en hoe je duidelijke alt-teksten schrijft voor je website.
Wat is alt-tekst?
Alt-tekst is alternatieve tekst bij een afbeelding. Deze tekst beschrijft kort welke informatie een afbeelding, grafiek, icoon of logo geeft.
Mensen die een afbeelding niet kunnen zien, kunnen de alt-tekst laten voorlezen door een screenreader. Zo krijgen zij toch mee wat de afbeelding toevoegt aan de pagina.
In WordPress vul je alt-tekst meestal in bij het veld “Alternatieve tekst”. Dit is iets anders dan een onderschrift. Een onderschrift is zichtbaar op de pagina. Alt-tekst is meestal niet zichtbaar, maar wordt wel gebruikt door hulpsoftware.
In de code staat alt-tekst in het alt-attribuut van een afbeelding.
Waarom zijn alt-teksten belangrijk?
Een afbeelding kan veel informatie geven. Maar iemand die de afbeelding niet kan zien, krijgt die informatie niet vanzelf mee. Mensen met een visuele beperking gebruiken vaak een screenreader die de alt-teksten voorlezen. Zo begrijpen zij wat de afbeelding toevoegt aan de pagina.
Niet elke afbeelding heeft alt-tekst nodig. Afbeeldingen die informatie geven of een functie hebben, hebben een goed tekstalternatief nodig. Afbeeldingen die alleen decoratief zijn, kun je meestal beter leeg laten voor hulpsoftware.
De belangrijkste vraag: voegt de afbeelding informatie toe?
Bij alt-teksten gaat het niet alleen om de vraag wat er op een afbeelding te zien is. De belangrijkste vraag is:
Wat mist iemand als deze afbeelding niet wordt voorgelezen?
Soms is een afbeelding vooral bedoeld voor sfeer. Denk aan een stockfoto van mensen achter een laptop op een algemene dienstenpagina. Als de tekst op de pagina al duidelijk genoeg is, voegt zo’n afbeelding weinig extra informatie toe. In dat geval kan een lege alt-tekst beter zijn.
Bij andere afbeeldingen ligt dat anders. Een grafiek met cijfers geeft bijvoorbeeld informatie die je niet zomaar kunt missen. Ook een afbeelding met tekst, een screenshot van een formulier of een icoon zonder begeleidende tekst kan belangrijke informatie of een functie hebben.
Een goede alt-tekst beschrijft daarom niet altijd letterlijk wat je ziet. De tekst maakt vooral duidelijk wat de afbeelding betekent op die plek. Zo krijgt iemand die de afbeelding niet ziet toch dezelfde belangrijke informatie mee.
Wanneer schrijf je wél alt-tekst?
Je schrijft alt-tekst wanneer een afbeelding informatie geeft die belangrijk is om de pagina goed te begrijpen. Dat geldt ook voor afbeeldingen die een functie hebben, zoals een knop, link of icoon.
De alt-tekst hoeft niet elk detail van de afbeelding te beschrijven. Het gaat vooral om de informatie of functie die de afbeelding op die plek heeft.
Informatieve afbeeldingen
Een informatieve afbeelding voegt inhoud toe aan de pagina. Zonder die afbeelding mist de bezoeker belangrijke informatie.
Denk bijvoorbeeld aan:
Alt-tekst: Zwarte leren schoudertas met gouden gesp.
Alt-tekst: Grafiek die laat zien dat het aantal online aanvragen stijgt.
Alt-tekst: Wethouder opent het nieuwe buurthuis aan de Dorpsstraat.
Alt-tekst: Hoofdingang van het Provinciehuis.
Functionele afbeeldingen
Sommige afbeeldingen zijn niet alleen bedoeld om iets te laten zien, maar om iets te doen. Denk aan iconen, knoppen of klikbare afbeeldingen.
Alt-tekst: Zoeken
Alt-tekst: Verwijderen
Alt-tekst: Winkelwagen bekijken
Alt-tekst: Naar de homepage van Normeris
Afbeeldingen met tekst
Soms staat belangrijke tekst in een afbeelding. Denk aan een banner, poster, advertentie, actiebeeld of socialmediabeeld dat op de website wordt geplaatst.
Als die tekst belangrijk is, moet die informatie ook toegankelijk zijn voor mensen die de afbeelding niet zien. In veel gevallen is het beter om de tekst gewoon als echte tekst op de pagina te zetten.
Dat heeft meerdere voordelen:
- de tekst is beter leesbaar;
- de tekst schaalt beter mee op mobiel;
- de tekst kan worden voorgelezen door hulpsoftware;
- de tekst is beter vindbaar;
- de tekst is makkelijker aan te passen.
Gebruik een afbeelding dus liever niet als enige plek waar belangrijke informatie staat. Staat er bijvoorbeeld een datum, prijs, actie of instructie in een afbeelding? Zet die informatie dan ook als gewone tekst op de pagina.
Grafieken, schema’s en infographics
Grafieken, schema’s en infographics bevatten vaak te veel informatie voor één korte alt-tekst. Een korte beschrijving is dan meestal niet genoeg.
Geef in de alt-tekst kort aan wat de afbeelding is. Zet daarna de belangrijkste informatie ook als gewone tekst op de pagina.
Bijvoorbeeld:
Alt tekst: Staafgrafiek met veelvoorkomende toegankelijkheidsproblemen op een website.
Korte tekstuele conclusie onder de grafiek:
In dit voorbeeld komen contrastproblemen en ontbrekende alt-teksten het vaakst voor. Formulieren en toetsenbordbediening leveren minder problemen op, maar blijven belangrijke aandachtspunten.
Zo laat je precies zien wat je bedoelt: de alt-tekst beschrijft kort wat de afbeelding is, en de zichtbare tekst onder de grafiek geeft de belangrijkste conclusie. Dat is beter dan proberen alle informatie in één lange alt-tekst te stoppen.
Wanneer laat je alt-tekst leeg?
Niet elke afbeelding heeft alt-tekst nodig. Soms is het juist beter om de alt-tekst leeg te laten.
Dat geldt voor afbeeldingen die alleen bedoeld zijn voor sfeer, opmaak of visuele ondersteuning. Denk aan een decoratieve stockfoto, een abstracte vorm, een patroon, een achtergrondbeeld of een sfeerbeeld dat geen extra informatie toevoegt.
Ook iconen kunnen decoratief zijn. Staat er bijvoorbeeld een telefoonicoon naast de tekst “Bel ons”? Dan hoeft het icoon zelf meestal geen alt-tekst te krijgen. De tekst ernaast maakt de betekenis al duidelijk.
De belangrijkste vraag is:
Mist iemand belangrijke informatie als deze afbeelding wordt overgeslagen?
Is het antwoord nee, dan is een lege alt-tekst vaak beter. Zo voorkom je dat screenreaders onnodige informatie voorlezen.
Een lege alt-tekst betekent dus niet automatisch dat er iets vergeten is. Het kan juist een bewuste keuze zijn. Je laat de afbeelding dan overslaan door hulpsoftware, zodat de bezoeker sneller bij de belangrijke inhoud komt.
Voorbeelden van goede alt-teksten
Een goede alt-tekst hangt af van de situatie. Dezelfde afbeelding kan op de ene plek informatief zijn en op een andere plek alleen decoratief. Kijk daarom altijd naar de functie van de afbeelding op de pagina.
|
Situatie |
Minder goed |
Beter |
|---|---|---|
 |
Vergrootglas |
Zoeken |
 |
Prullenbak |
Verwijderen |
 |
Mensen achter laptop |
Leeg laten als het beeld decoratief is |
|
|
Tas |
Zwarte leren schoudertas met gouden gesp |
 |
Grafiek met lijn |
Grafiek die laat zien dat het aantal aanvragen stijgt |
 |
Logo Normeris |
Normeris homepage |
 |
Sale Banner |
Zet de tekst ook zichtbaar op de pagina |
Deze voorbeelden laten zien dat alt-tekst niet altijd een letterlijke beschrijving hoeft te zijn. Bij een knop of link is vooral de actie belangrijk. Bij een productfoto zijn de herkenbare kenmerken belangrijk. Bij een decoratieve afbeelding is een lege alt-tekst vaak beter.
Bij complexe afbeeldingen, zoals grafieken of schema’s, is één korte alt-tekst meestal niet genoeg. Zet de belangrijkste informatie dan ook als gewone tekst op de pagina.
Gebruik je dezelfde afbeelding op meerdere plekken in WordPress? Kijk dan per pagina wat de afbeelding daar doet. De juiste alt-tekst hangt af van de context.
Veelgemaakte fouten bij alt-teksten
Bij alt-teksten gaat het vaak mis omdat het veld automatisch wordt ingevuld, zonder goed te kijken naar de functie van de afbeelding. Daardoor krijgt een afbeelding soms te veel uitleg, te weinig uitleg of de verkeerde uitleg.
Veelgemaakte fouten zijn:
Checklist: heeft deze afbeelding alt-tekst nodig?
Twijfel je of een afbeelding alt-tekst nodig heeft? Gebruik dan deze vragen:
- Geeft de afbeelding informatie die niet in de tekst staat?
- Heeft de afbeelding een functie, zoals een knop of link?
- Zou iemand belangrijke informatie missen als de afbeelding niet zichtbaar is?
- Staat dezelfde informatie al direct naast de afbeelding?
- Is de afbeelding alleen bedoeld voor sfeer, opmaak of decoratie?
- Bevat de afbeelding tekst die belangrijk is?
- Is het een grafiek, schema of infographic?
- Is de alt-tekst kort en duidelijk?
- Beschrijft de alt-tekst de betekenis van de afbeelding in deze context?
- Is gewone zichtbare tekst misschien beter dan alt-tekst?
Conclusie
Een goede alt-tekst helpt bezoekers begrijpen wat een afbeelding toevoegt aan de pagina. Maar niet elke afbeelding heeft alt-tekst nodig.
Afbeeldingen die informatie geven of een functie hebben, hebben een passend tekstalternatief nodig. Afbeeldingen die alleen bedoeld zijn voor sfeer of opmaak, kun je vaak beter leeg laten voor hulpsoftware.
Kijk daarom steeds naar de functie van de afbeelding. Voegt de afbeelding informatie toe? Heeft de afbeelding een actie of bestemming? Of is de afbeelding alleen decoratief? Op basis daarvan bepaal je of alt-tekst nodig is en wat je erin zet.
Twijfel je of afbeeldingen, iconen en andere onderdelen op je website goed toegankelijk zijn? Normeris kan je website onderzoeken en praktische verbeterpunten geven.
