Afbeeldingen conform WCAG op een website

Waarom toegankelijke afbeeldingen belangrijk zijn

Afbeeldingen spelen op veel websites een belangrijke rol. Ze ondersteunen inhoud, trekken aandacht of helpen bezoekers bij het uitvoeren van een taak. Niet iedere bezoeker kan afbeeldingen echter op dezelfde manier waarnemen. Mensen die een schermlezer gebruiken, slechtziend zijn of afbeeldingen niet goed geladen krijgen, zijn afhankelijk van een goed alternatief. Daarom is het belangrijk dat afbeeldingen op een website conform WCAG worden toegepast.

Wat WCAG vraagt bij afbeeldingen

WCAG verlangt dat niet-tekstuele content een tekstalternatief krijgt wanneer die informatie overbrengt of een functie heeft. Dat betekent dat een beheerder of redacteur altijd moet beoordelen wat de rol van een afbeelding is. Is de afbeelding informatief, functioneel of decoratief, dan hoort daar een andere aanpak bij.

Informatieve afbeeldingen

Een informatieve afbeelding voegt inhoud toe aan de pagina. Denk aan een foto die context geeft, een afbeelding die een product toont of een visual die een proces ondersteunt. Bij dit soort afbeeldingen is een passende alt-tekst nodig. Die tekst moet niet beschrijven wat er visueel allemaal te zien is, maar vooral duidelijk maken welke relevante informatie de afbeelding toevoegt aan de inhoud van de pagina.

Functionele afbeeldingen

Sommige afbeeldingen hebben een functie. Bijvoorbeeld een vergrootglas bij een zoekveld, een printericoon of een afbeelding die als knop of link werkt. In dat geval moet het tekstalternatief de functie van de afbeelding duidelijk maken. Het gaat dan niet om wat de afbeelding voorstelt, maar om wat de gebruiker ermee kan doen.

Decoratieve afbeeldingen

Niet elke afbeelding hoeft door een schermlezer te worden aangekondigd. Decoratieve afbeeldingen voegen geen inhoudelijke informatie toe en hebben geen functie. Ze zijn alleen bedoeld voor opmaak of sfeer. In dat geval hoort de afbeelding een leeg tekstalternatief te krijgen, zodat hulptechnologie deze overslaat. Daarmee voorkom je dat gebruikers onnodige of verwarrende informatie te horen krijgen.

Een goede alt-tekst schrijven

Een goede alt-tekst is kort, duidelijk en relevant voor de context van de pagina. De tekst moet beschrijven wat de gebruiker moet weten om de inhoud of functie van de afbeelding te begrijpen. Overbodige formuleringen zoals afbeelding van of foto van zijn meestal niet nodig, omdat schermlezers vaak al aankondigen dat het om een afbeelding gaat.

Context bepaalt de juiste beschrijving

Dezelfde afbeelding kan op verschillende pagina's een andere alt-tekst nodig hebben. Dat komt doordat de context bepaalt welke informatie relevant is. Een foto van een medewerker op een teampagina vraagt om een andere beschrijving dan dezelfde foto in een nieuwsbericht of op een contactpagina. Toegankelijkheid vraagt daarom altijd om inhoudelijke afweging en niet alleen om technische invulling.

Complexe afbeeldingen en aanvullende uitleg

Sommige afbeeldingen bevatten veel informatie, zoals grafieken, schema's of infographics. Een korte alt-tekst is dan vaak niet genoeg. In zulke gevallen moet de kern van de afbeelding kort in de alt-tekst worden benoemd en moet de uitgebreide uitleg in de omringende tekst van de pagina staan. Zo blijft de informatie ook toegankelijk voor bezoekers die de afbeelding zelf niet goed kunnen waarnemen.

Veelgemaakte fouten bij afbeeldingen

Een veelgemaakte fout is dat afbeeldingen helemaal geen alt-tekst krijgen, terwijl ze wel informatief zijn. Ook komt het vaak voor dat decoratieve afbeeldingen onnodig worden beschreven. Een andere fout is dat een bestandsnaam wordt gebruikt als alternatief, of dat de alt-tekst te lang, te vaag of juist niet relevant is. Ook afbeeldingen die tekst bevatten kunnen problemen veroorzaken, vooral wanneer die tekst niet elders op de pagina beschikbaar is.

Afbeeldingen met tekst vragen extra aandacht

Tekst in afbeeldingen is vanuit toegankelijkheid meestal ongunstig. Tekst die onderdeel is van een afbeelding schaalt minder goed, is moeilijker leesbaar en wordt niet vanzelf goed voorgelezen door hulptechnologie. Waar mogelijk moet belangrijke tekst daarom als echte HTML-tekst op de pagina worden geplaatst. Alleen in uitzonderlijke gevallen is tekst in een afbeelding acceptabel.

Praktische aandachtspunten voor beheerders

Voor beheerders van websites is het belangrijk om bij iedere afbeelding stil te staan bij het doel ervan. Voeg alleen een alt-tekst toe wanneer die werkelijk nodig is, schrijf beschrijvingen vanuit de context en controleer of afbeeldingen met een functie duidelijk zijn benoemd. Ook is het verstandig om afbeeldingen niet als enige informatiedrager te gebruiken wanneer dezelfde boodschap ook in gewone tekst kan worden aangeboden.

Toegankelijke afbeeldingen verbeteren de hele website

Afbeeldingen conform WCAG dragen bij aan een website die voor meer mensen bruikbaar is. Ze maken informatie toegankelijker, verminderen verwarring en verbeteren de kwaliteit van contentbeheer. Daarmee zijn toegankelijke afbeeldingen niet alleen een technische verplichting, maar ook een belangrijk onderdeel van duidelijke en gebruiksvriendelijke webinhoud.