Afbeeldingen

Waarom afbeeldingstoegankelijkheid belangrijk is

Afbeeldingen kunnen informatie overbrengen, sfeer creëren of gebruikers helpen een actie uit te voeren. Maar zonder goede tekstuele alternatieven gaat die informatie verloren voor mensen die de afbeelding niet (goed) kunnen waarnemen. Dat raakt niet alleen de gebruikservaring, maar ook de toegankelijkheid van je website of applicatie.

Volgens de WCAG moeten niet-tekstuele elementen, zoals afbeeldingen, een passend tekstalternatief krijgen wanneer ze informatie of functionaliteit overbrengen. Welke oplossing passend is, hangt af van het type afbeelding en de context waarin deze wordt gebruikt.

Welke soorten afbeeldingen zijn er?

Om afbeeldingen goed toegankelijk te maken, is het belangrijk eerst te bepalen wat voor soort afbeelding je gebruikt. In de praktijk maken we vaak onderscheid tussen de volgende categorieën:

• Informatieve afbeeldingen: afbeeldingen die inhoudelijke informatie toevoegen, zoals een foto, illustratie of screenshot.
• Functionele afbeeldingen: afbeeldingen die een actie uitvoeren of ondersteunen, bijvoorbeeld een icoonknop of klikbare afbeelding.
• Decoratieve afbeeldingen: afbeeldingen die geen inhoudelijke informatie toevoegen en puur visueel bedoeld zijn.
• Complexe afbeeldingen: grafieken, diagrammen, schema’s of infographics waarvoor vaak extra uitleg nodig is.
• Afbeeldingen met tekst: afbeeldingen waarin tekst is opgenomen, wat vaak toegankelijkheidsproblemen veroorzaakt.

Voor elk type gelden andere aandachtspunten. Daarom is een alt-tekst niet altijd genoeg — en soms zelfs niet gewenst.

Alternatieve tekst (alt-tekst): wat is het en wanneer gebruik je het?

Een alternatieve tekst (alt-tekst) is een tekstueel alternatief voor een afbeelding. Schermlezers lezen deze tekst voor, en browsers tonen hem soms wanneer een afbeelding niet kan worden geladen. Een goede alt-tekst beschrijft de functie of inhoud van de afbeelding binnen de context van de pagina.

Belangrijke uitgangspunten voor een goede alt-tekst:

• Beschrijf wat relevant is in de context van de pagina.
• Houd de tekst kort en duidelijk.
• Herhaal geen informatie die al direct naast de afbeelding staat.
• Vermijd formuleringen zoals “Afbeelding van…” als dat niets toevoegt.
• Schrijf vanuit de bedoeling van de content, niet alleen wat visueel zichtbaar is.

Bij functionele afbeeldingen (zoals een zoekicoon of download-icoon) beschrijft de alt-tekst vooral de actie, niet het uiterlijk. Bij decoratieve afbeeldingen laat je de alt-tekst juist leeg, zodat schermlezers deze overslaan.

Wanneer is een afbeelding decoratief?

Een afbeelding is decoratief wanneer deze geen nieuwe informatie toevoegt en niet nodig is om de content of functionaliteit te begrijpen. Denk aan sfeerbeelden, achtergrondillustraties of visuele versiering naast tekst die al voldoende duidelijk is.

Decoratieve afbeeldingen moeten niet onnodig door schermlezers worden voorgelezen. Dat zorgt namelijk voor ruis en een minder prettige gebruikerservaring. In veel gevallen betekent dit dat je een lege alt-tekst gebruikt (alt=””) of de afbeelding als decoratief markeert, afhankelijk van hoe de afbeelding technisch is geplaatst.

Veelgemaakte fouten bij afbeeldingen

• Alt-teksten invullen met bestandsnamen (bijv. image123.jpg).
• Overal dezelfde alt-tekst gebruiken, ongeacht context.
• Decoratieve afbeeldingen onnodig beschrijven.
• Belangrijke informatie alleen in een afbeelding plaatsen.
• Tekst in afbeeldingen gebruiken zonder tekstalternatief op de pagina.
• Icoonknoppen zonder toegankelijke naam plaatsen.

Deze fouten komen veel voor in CMS’en, page builders en designsystemen, vooral wanneer content onder tijdsdruk wordt geplaatst. Met duidelijke richtlijnen en redactionele afspraken kun je dit grotendeels voorkomen.

Afbeeldingen in websites, CMS’en en page builders

Bij het publiceren van content in bijvoorbeeld WordPress is het belangrijk dat redacteuren weten waar en hoe zij alternatieve teksten moeten invullen. Toegankelijkheid van afbeeldingen is namelijk niet alleen een technisch onderwerp, maar ook een content- en redactieonderwerp.

Een goede werkwijze is om bij elke afbeelding kort stil te staan bij deze vragen:

1. Voegt deze afbeelding informatie toe?
2. Heeft de afbeelding een functie (bijvoorbeeld knop of link)?
3. Is de afbeelding puur decoratief?
4. Staat de relevante informatie al in de omliggende tekst?

Door dit proces standaard mee te nemen, verbeter je de toegankelijkheid structureel en voorkom je herstelwerk achteraf.

Wat je op deze categoriepagina vindt

Op deze pagina verzamelen we artikelen over het toegankelijk maken van afbeeldingen. Denk aan praktische uitleg over alt-teksten, het verschil tussen decoratieve en informatieve afbeeldingen, en voorbeelden van veelvoorkomende fouten. Zo kun je snel verdiepen in het onderwerp en direct toepassen in je eigen content of website.

Hulp nodig bij toegankelijke content of websites?

Wil je ondersteuning bij het toegankelijk maken van afbeeldingen, contentrichtlijnen voor redacteuren of een bredere WCAG-aanpak voor je website? Audit House helpt organisaties met audits, advies en training rondom digitale toegankelijkheid. Zo werk je gericht aan betere gebruikerservaring én naleving van toegankelijkheidsrichtlijnen.