Decoratieve afbeeldingen
Sommige afbeeldingen op een pagina geven je bezoeker niet méér informatie dan de informatie die ook al in de tekst staat. Dit noemen we decoratieve afbeeldingen.
Voorbeelden van decoratieve afbeeldingen zijn:
- Afbeeldingen in de achtergrond van een website.
- Iconen naast een tekst met dezelfde informatie.
- Sfeerbeelden.
Overwegingen
Vragen die je jezelf kunt stellen als je een decoratieve afbeelding plaatst:
- Waarom wil ik deze afbeelding plaatsen?
- Als ik de afbeelding weglaat, welke informatie gaat er dan verloren?
- Als ik deze afbeelding niét zou kunnen gebruiken, zou ik dan een vervangende afbeelding zoeken?
Alternatieve teksten verbergen voor hulpsoftware
Gaat er geen informatie verloren? Dan heeft de afbeelding geen beschrijving nodig. Je kunt er dan voor kiezen om de afbeelding te verbergen voor hulpsoftware. Er is dan geen informatie meer beschikbaar over de afbeelding: niet wát er op de afbeelding staat, maar zelfs niet dát er een afbeelding staat. Bezoekers die gebruik maken van bijvoorbeeld een screenreader hoeven dan niet onnodig naar de beschrijving te luisteren. Zorg er wel voor dat je echt zeker weet dat de afbeelding niet informatief is voordat je deze keuze maakt.
Niet doen
Informatieve afbeeldingen verbergen voor hulpsoftware door het alt-attribuut leeg te laten.
<img src="https://raw.githubusercontent.com/nl-design-system/documentatie/assets/richtlijnen_content_afbeeldingen-Kaart.jpg" alt="" class="utrecht-img"/>
Sfeerbeelden
Je plaatst sfeerbeelden voornamelijk omdat ze passen bij de organisatie waar je voor werkt. Ze passen bijvoorbeeld bij jullie kernwaarden of de service die jullie verlenen. Sommige bezoekers die gebruikmaken van hulpsoftware willen daarom juist wel een beschrijving krijgen van decoratieve sfeerbeelden. Je kunt er dus ook voor kiezen om deze afbeeldingen wel een alternatieve tekst te geven. In dat geval beschrijf je inhoudelijk wat er op de afbeelding te zien is.
Decoratieve afbeeldingen beschrijven
Het helpt om je voor te stellen dat je de afbeelding beschrijft aan iemand die hem niet kan zien, bijvoorbeeld iemand aan de telefoon. Denk na over welke kenmerken van een afbeelding belangrijk zijn om te benoemen.
Mogelijke kenmerken:
- Het precieze aantal mensen, dieren of objecten in de afbeelding.
- De gezichtsuitdrukkingen van de mensen in de afbeelding.
- Het geslacht of gender van de mensen in de afbeelding.
- De huidskleur van de mensen in de afbeelding.
- De acties die de mensen in de afbeelding uitvoeren.
- Wat er op de achtergrond te zien is en of het voor ziende bezoekers duidelijk is, of moet zijn, wat er te zien is. Benoem je 'de Eiffeltoren' of 'Een hoge metalen constructie die taps toeloopt, met een antenne er op.'?
Of iets relevant is om te benoemen ligt aan de context: het doel van de pagina en bijvoorbeeld de kern- en merkwaarden van je organisatie.
Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
Over deze richtlijnen
Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.
We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.