Wat is Alt Tekst voor obstakelvrij lezen van beelden?

Alt-tekst, of alternatieve tekst, beschrijft wat er op een afbeelding te zien is. Je gebruikt het om je website toegankelijk te maken voor iedereen, ook voor mensen die slechtziend of blind zijn. 

Een screenreader leest de alt-tekst voor, zodat gebruikers begrijpen wat er op het beeld staat. Zo draagt alt-tekst direct bij aan digitale toegankelijkheid en helpt het je website te voldoen aan de WCAG-richtlijnen.

Alt-teksten maken niet alleen je website toegankelijker, maar verbeteren ook je vindbaarheid in zoekmachines. Door duidelijke beschrijvingen toe te voegen, begrijpt een zoekmachine beter waar je afbeelding over gaat. Zo ondersteun je zowel gebruikers als de prestaties van je website.

In het kort

• Alt-tekst maakt websites toegankelijk voor iedereen

• Goede beschrijvingen helpen zoekmachines je inhoud beter begrijpen

• Alt-teksten zijn belangrijk voor naleving van digitale toegankelijkheidsrichtlijnen

Hoe maak je goede alternatieve teksten (alt-teksten)?

Je maakt een alt tekst door een korte beschrijving toe te voegen aan het element dat je wilt verduidelijken. Dit doe je in de code of in je CMS (Content Management Systeem). Een CMS helpt je om webinhoud te beheren zonder dat je veel technische kennis nodig hebt.

In HTML voeg je de beschrijving toe met het alt-attribuut binnen het img-tag. Zo geef je aan wat er op de afbeelding te zien is. Dit helpt mensen die een schermlezer gebruiken. Bijvoorbeeld:

<img src="bloem.jpg" alt="Gele tulp in een vaas" title="Gele tulp in een vaas">

Naast het alt-attribuut kun je ook het title-attribuut (extra beschrijving die zichtbaar wordt als je je muis over dat woord schuift) gebruiken. Sommige schermlezers lezen dit in plaats van de alt-tekst. Door dezelfde tekst in beide attributen te plaatsen, zorg je dat niemand informatie mist.

Voor knoppen en formulieren gebruik je ARIA-attributen, zoals aria-label of aria-labelledby. Deze maken duidelijk wat een element doet, ook zonder visuele aanwijzingen.

De verschillende beeldtypen

Informatieve beelden

Informatieve beelden laten belangrijke inhoud zien die je niet mag missen. Ze helpen mensen die schermlezers gebruiken om te begrijpen wat er op een afbeelding staat.

Een goed voorbeeld is een logo. Je beschrijft kort wat het logo toont en van wie het is. Bijvoorbeeld:

<img src="logo.jpg" alt="Het Eye-Able-logo. Het toont een oog." title="Het Eye-Able-logo. Het toont een oog.">

Een schermlezer leest deze tekst voor, zodat iemand die het beeld niet ziet toch weet dat het om het Eye-Able-logo gaat. Zo maak je de website toegankelijk en voldoe je aan de WCAG-richtlijnen.

Gebruik bij informatieve beelden altijd concrete woorden. Vermijd vage termen zoals “mooie afbeelding” of “leuk ontwerp”. Beschrijf alleen de relevante informatie.

Voorbeeld van duidelijke alt-teksten:

Diagrammen

Diagrammen tonen gegevens en verbanden. De alt tekst afbeelding beschrijft hier wat het diagram laat zien en waarom het belangrijk is.

Wanneer het diagram weinig gegevens bevat, kun je de informatie in de alt-tekst opnemen. Bijvoorbeeld:

“Toont de verkiezingsresultaten in een staafdiagram. Partij A: 40%, Partij B: 30%, Partij C: 20%.”

Als het diagram complex is, beschrijf je alleen het doel en verwijs je naar een tekst eronder voor meer details. Dat voorkomt dat de alt-tekst te lang wordt.

Voorbeeld:

<img src="verkiezingen-diagram.jpg" alt="Staafdiagram van de verkiezingsuitslag. Verdere uitleg volgt in de tekst.">

Een diagram moet altijd begrijpelijk zijn voor iedereen. Daarom is het goed om de belangrijkste cijfers ook in tekst te herhalen.

Bijvoorbeeld:

Door dit toe te voegen, kunnen ook mensen die geen grafiek zien de informatie begrijpen.

Functionele beelden

Functionele beelden hebben een doel. Ze leiden ergens naartoe of voeren een actie uit. Denk aan knoppen, iconen of logo’s met een link. De alt tekst afbeelding beschrijft niet hoe het beeld eruitziet, maar wat het doet.

Een goed voorbeeld van een functioneel beeld is een klikbaar logo dat naar de homepage verwijst:

<a href="https://eye-able.com/">

<img src="logo.jpg" alt="Startpagina van Eye-Able" title="Startpagina van Eye-Able">

</a>

De alt-tekst vertelt hier dat het beeld naar de startpagina gaat. Het uiterlijk van het logo is niet belangrijk, de functie wel.

Gebruik bij functionele beelden altijd korte, duidelijke beschrijvingen zoals:

• “Zoeken starten”

• “Formulier verzenden”

• “Volgende pagina”

Vermijd beschrijvingen als “pijl naar rechts” of “vergrootglas”. Die zeggen niets over de actie.

Veelvoorkomende functionele beelden:

Door deze aanpak begrijpt iedereen, ook gebruikers van schermlezers, wat er gebeurt als ze op het beeld klikken.

Decoratieve beelden

Decoratieve beelden voegen geen inhoud toe. Ze zijn er alleen voor sfeer of vormgeving. In dat geval laat je de alt tekst afbeelding leeg, maar het attribuut blijft bestaan.

Voorbeeld:

<img src="achtergrondpatroon.jpg" alt="">

Een schermlezer slaat het beeld dan over. Zo voorkom je dat gebruikers onnodige informatie horen.

Gebruik decoratieve beelden bewust. Als een foto of pictogram iets vertelt over de inhoud, hoort het niet decoratief te zijn. Dan moet je een beschrijving toevoegen.

Checklist voor decoratieve beelden:

• Draagt het beeld bij aan de inhoud?
  Ja → voeg een alt-tekst toe.
  Nee → laat het alt-attribuut leeg.

• Is het beeld puur opvulling of achtergrond
  Ja → gebruik alt="".

• Is het een onderdeel van een knop of link
  Nee → dan mag het decoratief zijn.

Een duidelijk onderscheid tussen decoratieve en informatieve beelden helpt om je website toegankelijk te houden.

Door op deze manier met alt-teksten om te gaan, maak je je website begrijpelijker en gebruiksvriendelijker voor iedereen.

Hoe schrijf je goede alt teksten?

Goede alt-teksten helpen mensen die geen beelden kunnen zien om de inhoud te begrijpen. Jij schrijft een goede alt-tekst door kort en duidelijk te beschrijven wat op het beeld te zien is. 

Gebruik geen woorden als “afbeelding van” of “foto van”, want schermlezers geven dat al aan. Richt je op wat echt belangrijk is voor de inhoud en context van de pagina.

Een alt-tekst is het meest effectief als hij tussen 80 en 120 tekens blijft. Dit is lang genoeg om de kern te beschrijven, maar kort genoeg voor hulpmiddelen zoals brailleleesregels. 

Een goed voorbeeld van een korte, duidelijke beschrijving is: “Een rode appel op een wit bord.” Zo’n alt tekst voorbeeld maakt direct duidelijk wat iemand niet kan zien.

Zorg dat je alt-tekst grammaticaal klopt en dat de spelling juist is. Een fout in de tekst kan de betekenis veranderen of verwarring veroorzaken. Controleer daarom altijd even de tekst voordat je hem publiceert. 

Tabel: Richtlijnen voor alt-teksten

Een goede alt-tekst draagt ook bij aan alt tekst SEO. Zoekmachines gebruiken deze teksten om te begrijpen waar een afbeelding over gaat. Beschrijf dus wat relevant is zonder te overdrijven of zoekwoorden te herhalen. Een korte, informatieve tekst helpt zowel gebruikers als zoekmachines.

Vraag om feedback van iemand die een schermlezer gebruikt of die het beeld niet kent. Hun reactie laat zien of jouw beschrijving duidelijk genoeg is. Als ze begrijpen wat het beeld laat zien, weet je dat jouw alt-tekst goed werkt. Zo maak jij jouw website toegankelijker en gebruiksvriendelijker voor iedereen.

Wat gebeurt er eigenlijk als alternatieve teksten ontbreken?

Wanneer je geen alternatieve teksten (alt teksten) toevoegt, missen gebruikers met een screenreader belangrijke informatie. De lezer hoort dan alleen de bestandsnaam, zoals img123.jpg, in plaats van wat er op de afbeelding staat. Dat maakt je website minder toegankelijk en in strijd met de WCAG richtlijnen en de Wet digitale toegankelijkheid 2025.

Gevolgen van ontbrekende alt-teksten:

• Gebruikers begrijpen de inhoud niet.

• Je website voldoet niet aan de Web Content Accessibility Guidelines (WCAG 2.2).

• Overheden en organisaties riskeren boetes volgens het Besluit digitale toegankelijkheid overheid.

Een goede alt-tekst zorgt dat iedereen je digitale toegankelijkheid website kan gebruiken. Zo voldoe je ook beter aan de European Accessibility Act (EAA).

Wet digitale toegankelijkheid

De Wet digitale toegankelijkheid verplicht (semi-)overheden om websites en apps toegankelijk te maken voor iedereen, ook voor mensen met een beperking. Je moet zorgen dat je website voldoet aan de Web Content Accessibility Guidelines (WCAG). Deze regels helpen om teksten, afbeeldingen en video’s begrijpelijk en bruikbaar te maken voor iedereen.

Vanaf 28 juni 2025 geldt de European Accessibility Act (EAA). Deze Europese wet breidt de verplichtingen uit naar meer digitale producten en diensten. De Autoriteit Consument & Markt (ACM) controleert of organisaties zich hieraan houden.

Belangrijke verplichtingen voor (semi-)overheden:

• Maak websites en apps toegankelijk volgens standaard EN 301 549.

• Publiceer een toegankelijkheidsverklaring op elk digitaal kanaal.

• Zorg voor tekstalternatieven bij afbeeldingen en video’s.

• Houd de toegankelijkheid actueel en controleer regelmatig.

Door deze regels te volgen, maak jij je digitale kanalen bruikbaar voor iedereen en voldoe je aan de wet.

WCAG richtlijnen

De WCAG-richtlijnen helpen je om digitale content toegankelijk te maken voor iedereen. Ze leggen uit hoe je alt-teksten schrijft die voldoen aan internationale standaarden. Door deze richtlijnen te volgen, maak je je website bruikbaar voor mensen met een visuele beperking én verbeter je je SEO.

WCAG 2.2

De WCAG 2.2 bouwt voort op eerdere versies en geeft duidelijke eisen voor alternatieve teksten bij afbeeldingen. Je voegt een alt-tekst toe zodat schermlezers kunnen uitleggen wat er op de afbeelding staat. Dit maakt je website toegankelijker.

Belangrijke punten uit WCAG 2.2:

Meest gestelde vragen

1. Hoe geef ik mijn afbeeldingen een alt-tekst?

Je voegt alt-tekst toe in de HTML-code van een afbeelding met het attribuut alt. Schrijf een korte en duidelijke beschrijving van wat er te zien is. Beschrijf ook de functie van de afbeelding als die relevant is.

Bijvoorbeeld:

<img src="teamfoto.jpg" alt="Het Eye-Able team lacht voor het kantoor">

2. Hoe maak ik alt-teksten die voor iedereen duidelijk zijn?

Gebruik eenvoudige woorden en beschrijf alleen wat belangrijk is voor de context. Vermijd overbodige details en woorden als “afbeelding van” of “foto van”.

Een goede alt-tekst:

• Beschrijft wat iemand mist als de afbeelding niet zichtbaar is.

• Houdt rekening met de WCAG-richtlijnen voor digitale toegankelijkheid.

• Past binnen de betekenis van de pagina.

3. Welke fouten moet ik vermijden bij het maken van alt-tekst voor visuele content?

Veel mensen laten de alt-tekst leeg of schrijven te lange zinnen. Dat maakt de website minder toegankelijk.

Vermijd deze fouten:

1. Geen alt-tekst toevoegen.

2. Te algemene beschrijvingen zoals “afbeelding” of “foto”.

3. Overmatig gebruik van zoekwoorden.

4. Alt-teksten gebruiken voor decoratieve afbeeldingen die geen betekenis hebben.

4. Hoe draagt alt-tekst bij aan de SEO van mijn website?

Alt-tekst helpt zoekmachines te begrijpen wat er op een afbeelding staat. Zo kan jouw afbeelding beter scoren in Google Afbeeldingen.

Een goed geschreven alt-tekst:

• Verbetert de vindbaarheid van je website.

• Geeft context aan zoekmachines.

• Verhoogt de kans dat gebruikers jouw site bezoeken.

5. Kan het weglaten van alt-tekst de toegankelijkheid van mijn website beïnvloeden?

Ja, zonder alt-tekst kunnen schermlezers geen beschrijving geven van wat er op de afbeelding staat. Mensen met een visuele beperking missen dan informatie.

Alt-teksten zorgen dat iedereen dezelfde inhoud begrijpt, ongeacht of iemand kan zien of niet. Dat maakt je website toegankelijker en gebruiksvriendelijker.

6. Hoe check ik of mijn alt-teksten echt helpen bij slechtzienden?

Je kunt testen met een schermlezer zoals NVDA of VoiceOver. Laat de schermlezer de pagina voorlezen en luister of de beschrijvingen logisch klinken.

Daarnaast kun je tools gebruiken die toegankelijkheid controleren, zoals ons Eye-Able toegankelijkheidsplatform. We tonen snel en makkelijk of je alt-teksten ontbreken of onduidelijk zijn.