Hoe geef ik in mijn code een beschrijving aan een afbeelding?
Main content
Een informatieve afbeelding heeft een beschrijving nodig. Deze beschrijving mag zichtbaar zijn op de webpagina of onzichtbaar, zolang deze door hulpsoftware kan worden voorgelezen. Deze beschrijving wordt alt-tekst genoemd. Het toevoegen van een tekstalternatief via een alt-attribuut is de meest gebruikte methode. Maar er zijn ook andere opties.
Wat zijn de manieren om een tekstalternatief toe te voegen?
- Gebruik altijd het alt-attribuut op een img-element. Een title-attribuut voor een afbeelding is niet voldoende.
- Geef een informatieve afbeelding een betekenisvolle alt-tekst. Verberg decoratieve afbeeldingen door het alt-attribuut leeg te laten (alt="").
- Voor een zichtbaar tekstalternatief kan een figcaption-element binnen een figure-element worden gebruikt.
- In sommige gevallen kunnen ARIA-technieken worden gebruikt, bijvoorbeeld aria-describedby of aria-label.
- Gebruik bij SVG-afbeeldingen title- en desc-elementen.
- Zet informatie nooit in de CSS, bijvoorbeeld in :before of :after.
- Let extra op icon-fonts, emoji’s en iconen die uit een letter bestaan. Informatieve iconen die op deze manier zijn toegevoegd, hebben een tekstalternatief nodig.
- Ook iconen van uitroeptekens, waarschuwingsdriehoeken, sterretjes bij formulieren en een "link opent in een nieuw venster" hebben een tekstalternatief nodig.
Er kunnen situaties voorkomen die niet in de opsomming genoemd zijn. Voor klikbare afbeeldingen en andere bedieningselementen met afbeeldingen gelden meer eisen. Lees hiervoor de officiële documentatie.
Wat zijn de eisen vanuit WCAG?
Niet-tekstuele content moet toegankelijk worden gemaakt met een tekstalternatief.
Waarom is dit belangrijk?
Een slechtziende of blinde bezoeker weet niet wat er op een afbeelding staat. Het tekstalternatief is nodig om te beschrijven wat er op de afbeelding staat of wat het doel is van de afbeelding.
Wat zijn onze tips?
- Een niet-zichtbaar tekstalternatief dat alleen is bedoeld voor voorleessoftware mag niet verborgen worden met display:none of visibility:hidden. Deze code verbergt elementen niet alleen van het scherm, maar ook voor hulpsoftware.
- Heeft een complexe afbeelding een lange beschrijving nodig? Plaats de uitgeschreven tekst op de pagina of plaats het als een bestand meteen onder de afbeelding. Verwijs in de alt-tekst naar de plek waar deze uitgeschreven informatie staat, bijvoorbeeld “De uitgeschreven informatie staat meteen onder de afbeelding”.
Test het zelf
Controleer met een WAVE- of AXE webbrowser plug-in of een afbeelding een beschrijving heeft. Check de kwaliteit van de beschrijving zelf.