Begin met de vraag: waarom staat deze afbeelding hier?
De beste alt-tekst beschrijft niet “wat je ziet”, maar wat de gebruiker moet weten. Dezelfde afbeelding kan dus een andere alt-tekst krijgen, afhankelijk van de context.
- Is het doel sfeer? Dan is de afbeelding meestal decoratief en gebruik je
alt="". - Ondersteunt de afbeelding de tekst? Benoem dan het belangrijkste punt dat de afbeelding toevoegt.
- Is de afbeelding functioneel (link/knop)? Beschrijf dan de actie, niet het uiterlijk.
Vermijd dubbele informatie
Een screenreader kondigt vaak al aan dat het om een afbeelding gaat. Daarom is “Afbeelding van…” of “Foto van…” meestal overbodig. Schrijf liever direct wat belangrijk is.
Niet doen
- “Een foto van Audit House.”
- “Afbeelding van een hond.”
- “Logo van gemeente X.”
Wel doen
- “Team Audit House tijdens een workshop.”
- “Geleidehond naast een rolstoel.” (als dat relevant is voor de context)
- “Gemeente X” (bij een logo dat als merkvermelding dient)
Houd het kort, maar niet te kort
Een alt-tekst is geen uitgebreide beschrijving. Houd het compact en informatief. Als je merkt dat je meerdere zinnen nodig hebt om alles uit te leggen, is de kans groot dat je een langere tekstbeschrijving in de content nodig hebt (bijvoorbeeld bij een infographic).
Schrijf voor de context, niet voor de pixels
Noem alleen details die bijdragen aan het begrip. Bij een teamfoto is “vijf personen op kantoor” prima, maar je hoeft niet te beschrijven welke kleur shirt iedereen aan heeft, tenzij dat relevant is.
Functionele afbeeldingen: beschrijf de actie
Als een afbeelding een link of knop is, moet de alt-tekst duidelijk maken wat er gebeurt als je erop klikt.
<a href="/contact">
<img src="icoon-mail.svg" alt="Contact opnemen">
</a>
Vermijd alt-teksten als “mail-icoon” of “pictogram envelop”. Het gaat niet om de vorm, maar om de functie.
Infographics en afbeeldingen met tekst
Staat er belangrijke tekst in een afbeelding? Dan moet die informatie ook beschikbaar zijn als echte tekst op de pagina. Een alt-tekst is hiervoor meestal te beperkt. Gebruik de alt-tekst om kort aan te geven wat het is, en zet de inhoud eronder als tekst of in een goed gestructureerde samenvatting.
Voorbeeld
- Alt-tekst: “Infographic met de 5 stappen van een WCAG-audit.”
- Op de pagina: de vijf stappen als echte tekst, bijvoorbeeld als
<ol>.
Veelgemaakte fouten
- Alt-tekst leeg laten bij een informatieve afbeelding.
- Alt-tekst vullen met keywords in plaats van betekenisvolle content.
- Alleen het uiterlijk beschrijven (“blauwe knop”) in plaats van de boodschap of functie.
- Dezelfde alt-tekst voor meerdere verschillende afbeeldingen, waardoor context verdwijnt.
- Bestandsnamen als alt-tekst (“IMG_4829.jpg”)