Hoe kan ik mijn afbeeldingen toegankelijk maken voor iedereen?

11 mei. 2020 / Bo van Vliet / Digitale toegankelijkheid / 5 min.

Er wordt op websites veel gebruik gemaakt van afbeeldingen. Helemaal niet gek want afbeeldingen zijn ontzettend nuttig. Niet alleen trekken ze gemakkelijk de aandacht van de bezoeker, ook zijn ze bepalend voor de sfeer van een website. Daarnaast zijn afbeeldingen een handig middel om informatie over te dragen of bestaande content te verrijken. En juist daarom is het essentieel om ze voor iedereen toegankelijk te maken. In deze blog geven we een aantal tips om afbeeldingen voor iedereen toegankelijk te maken. Zo is jouw website beter vindbaar en zichtbaar voor jouw doelgroep.

Heb je vragen over webtoegankelijkheid of kom je ergens niet uit? Ons ervaren support team staat voor je klaar. Zet hem op!

1.1.1

Tip 1: Geef informatieve afbeeldingen een tekstuele beschrijving

Afbeeldingen kun je toegankelijk maken door ze te voorzien van een tekstalternatief, ook wel ALT-tekst genoemd. Het toevoegen van een ALT-tekst is niets anders dan tekstueel beschrijven wat je ziet op de afbeelding. Dankzij hulptechnologie kan deze tekst worden omgezet in andere vormen van weergave die jouw bezoekers nodig hebben, zoals grote letters, braille, spraak, symbolen of eenvoudiger taal.

Het is belangrijk dat de beschrijving exact dezelfde informatie overdraagt als de afbeelding. Een bezoeker van jouw website die alleen de tekstalternatieven ziet, zou de informatie moeten kunnen begrijpen. Afbeeldingen die puur ter decoratie zijn en dus geen informatie toevoegen, hoeven niet beschreven te worden.

Een ander groot voordeel van het plaatsen van tekstalternatieven is dat ook zoekmachines hier gebruik van maken bij het indexeren van websites. Jouw website is dankzij deze tekstalternatieven dus niet alleen beter toegankelijk maar ook beter vindbaar via o.a. Google.

Voorbeeld tekstuele beschrijving voor afbeeldingen

Tip 2: Gebruik voldoende kleurcontrast

Maak het voor gebruikers gemakkelijker om content te te zien door een duidelijke scheiding van voorgrond en achtergrond. Zorg daarom dat het contrast tussen voor- en achtergrondkleuren ten minste 4,5:1 is. Zo zijn tekst en afbeeldingen beter zichtbaar en kan je de boodschap op jouw pagina nog beter overdragen.

Voer de gemaakte keuzes in kleurcontrast consequent door. Door een eenduidige vormgeving kunnen jouw bezoekers beter inschatten waar ze aan toe zijn. Ook geeft het jouw website een professionele uitstraling.

Om het contrast tussen twee kleuren te meten, kun je gebruik maken van een gratis tool.

Voorbeeld voldoende kleurcontrast voor afbeeldingen

Tip 3: Maak zichtbaar welk onderdeel van een pagina focus heeft

Geef bezoekers die met het toetsenbord navigeren duidelijk aan welk onderdeel de focus heeft. Door middel van een zichtbare focusring weet jouw bezoeker welk onderdeel van de webpagina actief is. Dit geldt voor afbeeldingen, maar ook voor tekstlinks, knoppen en andere elementen.

Voorbeeld afbeelding zichtbaar uitlichten door focusring

Tip 4: Gebruik geen afbeelding van tekst

Afbeeldingen hebben veel pluspunten maar werken in sommige specifieke gevallen minder goed. Zo geven wij de voorkeur aan tekst in plaats van afbeeldingen met tekst. Dit heeft onder andere voordelen voor bezoekers die gebruik maken van voorleessoftware. Zo zou een afbeelding waar een titel boven staat, de titel liever als tekst worden weergegeven zodat deze makkelijk kan worden voorgelezen. Natuurlijk zijn er ook een aantal uitzonderingen, denk bijvoorbeeld aan teksten die onderdeel zijn van een logo of merknaam.

Voorbeeld Gebruik geen afbeelding van tekst

Ben je benieuwd of Stuurlui jou kan helpen?

Sjoerd Kuipers

Founding partner & online marketeer