Wat betekent decoratief?
Een afbeelding is decoratief als deze geen informatie toevoegt die nodig is om de content te begrijpen, en ook geen actie ondersteunt.
Als je de afbeelding weglaat en de betekenis van de pagina verandert niet, dan is de kans groot dat de afbeelding decoratief is.
Snelle check: 4 vragen
- Verliest de gebruiker informatie als de afbeelding niet zichtbaar is?
- Verduidelijkt de afbeelding de tekst (bijvoorbeeld een infographic, grafiek of stappenplan)?
- Is de afbeelding een knop of link (bijvoorbeeld een icoon waarmee je iets kunt doen)?
- Staat er tekst in de afbeelding die niet elders op de pagina terugkomt?
Als je op één van deze vragen “ja” antwoordt, dan is de afbeelding meestal niet decoratief. Dan is een betekenisvolle tekstalternatief nodig.
Voorbeelden van decoratieve afbeeldingen
- Illustraties of stockfoto’s die alleen sfeer toevoegen.
- Achtergrondafbeeldingen die geen informatie bevatten.
- Visuele scheidingslijnen, patronen en ornamenten.
- Herhalende iconen die niets toevoegen bovenop de tekst (bijvoorbeeld een pijltje naast een kop).
Voorbeelden van niet-decoratieve afbeeldingen
- Een foto die iets uitlegt wat niet in de tekst staat (bijvoorbeeld een productdetail dat belangrijk is).
- Een grafiek, diagram of infographic.
- Een screenshot met instructies waarbij de inhoud nodig is om de stap te begrijpen.
- Iconen die een status of betekenis dragen (bijvoorbeeld “waarschuwing”, “succes”, “verplicht veld”).
- Afbeeldingen die als link of knop fungeren.
Hoe markeer je een decoratieve afbeelding?
Decoratieve afbeeldingen wil je verbergen voor schermlezers. Voor een <img> doe je dat door een lege alt-tekst te gebruiken.
Dan slaan schermlezers de afbeelding over.
<img src="decoratieve-illustratie.svg" alt="">
Belangrijk: gebruik geen alt-tekst zoals “decoratie”, “afbeelding” of “plaatje”. Daarmee maak je de ervaring juist onrustiger, omdat de schermlezer alsnog
iets voorleest dat geen waarde heeft.
Veelgemaakte fouten
- Een informatieve afbeelding als decoratief behandelen, waardoor belangrijke informatie ontbreekt voor schermlezers.
- Een decoratieve afbeelding toch een alt-tekst geven, waardoor schermlezers onnodige ruis opleveren.
- Tekst in afbeeldingen zonder alternatief. Als de tekst niet ergens anders op de pagina staat, is de afbeelding niet decoratief.
- Iconen die betekenis dragen (bijvoorbeeld foutmeldingen) zonder toegankelijke naam of tekstalternatief.