Alt-tekst
Alt-tekst schrijven: zo maak je afbeeldingen toegankelijk
Een goede alt-tekst vertelt bezoekers die je afbeeldingen niet zien wat erop staat, en helpt zoekmachines je beelden te begrijpen. Je leest wanneer een afbeelding een alt-tekst nodig heeft, hoe je hem schrijft en wat je doet bij productfoto's, knoppen en grafieken.
Wat is een alt-tekst?
Een alt-tekst, of alternatieve tekst, is een korte beschrijving die je bij een afbeelding invult. Bezoekers zien hem niet, maar screenreaders lezen hem voor, en de browser toont hem als de afbeelding niet laadt.
WCAG vraagt in succescriterium 1.1.1 dat elke informatieve afbeelding een tekstalternatief heeft dat dezelfde informatie of functie overbrengt. Zoekmachines gebruiken alt-teksten ook om te begrijpen wat een afbeelding laat zien, zodat je beelden beter gevonden worden.
Zo herken je een goede alt-tekst
- Hij beschrijft wat de afbeelding op deze plek betekent, niet elk detail van het beeld.
- Hij is kort: meestal een zin of minder.
- Hij begint niet met 'afbeelding van' of 'foto van', want een screenreader meldt al dat het om een afbeelding gaat.
- Hij herhaalt niet letterlijk de tekst die al naast de afbeelding staat.
- Hij bevat geen bestandsnaam en geen opsomming van zoekwoorden.
Alt-tekst per soort afbeelding
Welke alt-tekst past, hangt af van de rol van de afbeelding op de pagina.
| Soort afbeelding | Wat je doet | Voorbeeld van de alt-tekst |
|---|---|---|
| Informatieve foto | Beschrijf wat relevant is voor de tekst eromheen. | Monteur vervangt een cv-ketel in een keuken |
| Productfoto | Noem het product en de details die voor de keuze tellen, zoals kleur, model en materiaal. | Wollen trui in donkergroen met ronde hals, achterkant |
| Link of knop met alleen een afbeelding | Beschrijf de functie of de bestemming, niet het beeld. | Zoeken (bij een icoon van een vergrootglas) |
| Logo | Gebruik de naam van de organisatie. Linkt het logo naar de homepage, noem dat dan ook. | AccessRadar, naar de homepage |
| Afbeelding met tekst | Neem de tekst uit de afbeelding over. | 20% korting op alle winterjassen |
| Grafiek of diagram | Geef de kern in de alt-tekst en zet de details in de tekst of in een tabel op de pagina. | Aantal bestellingen per maand, details in de tabel hieronder |
| Decoratieve afbeelding | Laat de alt-tekst leeg, zodat hulpsoftware de afbeelding overslaat. | Geen: de alt-tekst blijft leeg |
Decoratief of informatief?
Een afbeelding is decoratief als de pagina niets mist wanneer je hem weglaat, zoals een sfeerfoto naast een tekst die alles al vertelt, een scheidingslijn of een icoon naast een tekstlabel. Geef die een lege alt-tekst, zodat hulpsoftware hem overslaat. Een lege alt-tekst is iets anders dan geen alt-tekst: ontbreekt hij helemaal, dan lezen sommige screenreaders de bestandsnaam voor.
Twijfel je? Stel je voor dat je de pagina aan iemand voorleest. Zou je de afbeelding noemen, dan is hij informatief.
Een alt-tekst schrijven in vier stappen
Bepaal de functie
Vraag je af waarom de afbeelding op de pagina staat: om iets te laten zien, om ergens naartoe te linken of voor de sfeer.
Kijk naar de context
Lees de tekst rond de afbeelding. Wat daar al staat, hoef je niet te herhalen.
Schrijf de kern op
Beschrijf in een korte zin wat de bezoeker moet weten. Bij een productfoto zijn dat de details die bij de keuze helpen.
Tip: Vul de alt-tekst direct in bij het uploaden. WordPress en de meeste andere systemen hebben daar een apart veld voor.
Lees hem hardop voor
Klinkt de zin logisch midden in de tekst eromheen? Dan heb je een goede alt-tekst.
Alt-teksten op je hele website verbeteren
Op een website met honderden afbeeldingen is het lastig bij te houden welke alt-teksten ontbreken of niets zeggen. De AI-contentanalyse van AccessRadar leest je alt-teksten samen met de tekst eromheen en signaleert teksten als 'afbeelding', een bestandsnaam of 'klik hier', met een concreet voorstel voor een betere tekst.
Zo verbeter je elke week een deel van je afbeeldingen, en zie je in je dashboard hoe je website vooruitgaat.
Automatische tests én AI-contentanalyse
AccessRadar combineert automatische tests met AI-contentanalyse. Zo zie je niet alleen technische fouten, maar ook welke teksten je bezoekers echt helpen.
De AI-analyse leest de tekst van je pagina's en geeft suggesties, bijvoorbeeld voor:
- Alternatieve teksten: zegt de tekst iets zinvols, of is het 'afbeelding', een bestandsnaam of 'klik hier'?
- Linkteksten: wordt uit de linktekst en de tekst eromheen duidelijk waar een link naartoe leidt?
- Koppen en labels: beschrijven ze het onderwerp of het veld, of zijn het lege woorden zoals 'Info' of 'Veld 1'?
- Paginatitels en formulieren: is duidelijk waar een pagina over gaat en wat een veld verwacht?
Je krijgt concrete suggesties voor betere teksten, die je direct oppakt in je wekelijkse verbeterplan. Zo groeit je website elke week verder naar WCAG 2.2 AA-geschiktheid en bereik je meer klanten.
Lees hoe tests en AI-analyse samenwerken in het verbeterplan
Lees ook
Praktische uitleg over WCAG en digitale toegankelijkheid.
Kleurcontrast volgens WCAG: eisen, uitzonderingen en contrastchecker
Welk kleurcontrast vraagt WCAG 2.2? Lees de eisen voor tekst, knoppen en iconen, en test je eigen kleuren direct met de gratis contrastchecker.
WCAG 2.2 AA-checklist: wat controleer je op je website?
Praktische WCAG 2.2 AA-checklist per categorie, met uitleg en tips om direct te verbeteren. Handig voor eigenaren, redacteuren en developers.
Toetsenbordtoegankelijkheid: zo werkt je website zonder muis
Werkt je website zonder muis? Lees welke WCAG-eisen gelden voor toetsenbordbediening en focus, hoe je zelf test en hoe je veelvoorkomende problemen oplost.
Controleer je website gratis op WCAG
Vraag de gratis WCAG-check van AccessRadar aan en ontvang de resultaten van een automatische scan per e-mail, als startpunt voor je verbeterpunten.
Wil je daarna elke week verder? Het WCAG-verbeterplan voegt wekelijkse scans en AI-contentanalyse toe.
Een WCAG-scan ondersteunt je beoordeling. Een automatische WCAG-scan kan volledige WCAG 2.2 AA-geschiktheid niet vaststellen. Combineer regelmatige WCAG-scans met handmatig onderzoek en feedback van mensen met een beperking.
Veelgestelde vragen over alt-teksten
Hoe lang mag een alt-tekst zijn?
Er is geen vaste limiet, maar houd hem kort: meestal een zin of minder. Heeft een afbeelding meer uitleg nodig, zoals een grafiek, zet de details dan in de tekst op de pagina.
Heeft elke afbeelding een alt-tekst nodig?
Elke informatieve afbeelding heeft een beschrijving nodig. Decoratieve afbeeldingen krijgen een lege alt-tekst, zodat hulpsoftware ze overslaat.
Helpen alt-teksten voor SEO?
Ja. Zoekmachines gebruiken alt-teksten om afbeeldingen te begrijpen, zodat ze beter gevonden worden. Schrijf de alt-tekst voor mensen: een natuurlijke beschrijving werkt beter dan een opsomming van zoekwoorden.
Wat is het verschil tussen een alt-tekst en een titel bij een afbeelding?
De alt-tekst vervangt de afbeelding voor wie hem niet ziet. Een titel verschijnt als tooltip als je met de muis over de afbeelding gaat en wordt niet betrouwbaar voorgelezen. Gebruik dus altijd de alt-tekst.
In welke taal schrijf ik de alt-tekst?
In de taal van de pagina, zodat een screenreader hem met de juiste uitspraak voorleest.