Alt-tekst: zo maak je afbeeldingen toegankelijk voor iedereen

Waarom alt-tekst belangrijk is

Alt-tekst, kort voor alternatieve tekst, beschrijft wat een afbeelding laat zien of doet. Schermlezers lezen de tekst voor en brailleleesregels geven hem weer in braille. Zo krijgen blinde en slechtziende mensen dezelfde informatie die ziende mensen uit de afbeelding halen. Alt-tekst verschijnt ook als een afbeelding niet laadt, bijvoorbeeld bij een trage verbinding.

Ook zoekmachines gebruiken alt-tekst om te begrijpen wat een afbeelding laat zien. Goede alt-teksten helpen dus om je afbeeldingen in de zoekresultaten voor afbeeldingen te laten verschijnen en verbeteren de vindbaarheid van je website.

Tekstalternatieven zijn bovendien verplicht. WCAG-succescriterium 1.1.1 (Niet-tekstuele content) eist een tekstalternatief voor elke afbeelding die informatie overbrengt. Het is een van de meest basale regels van digitale toegankelijkheid, en ontbrekende alt-teksten behoren tot de meest gevonden fouten bij toegankelijkheidsaudits.

In het kort:

• Elke informatieve afbeelding heeft een alt-tekst nodig die de inhoud beschrijft.

• Elke functionele afbeelding heeft een alt-tekst nodig die de functie beschrijft.

• Decoratieve afbeeldingen krijgen een leeg alt-attribuut, zodat schermlezers ze overslaan.

Zo voeg je alt-tekst toe

In de meeste contentmanagementsystemen vind je bij het uploaden of bewerken van een afbeelding een veld "Alt-tekst" of "Alternatieve tekst". In HTML staat de alt-tekst in het alt-attribuut van het img-element:

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

Je hoeft de alt-tekst niet te herhalen in het title-attribuut. Sommige schermlezers lezen dan dezelfde tekst twee keer voor, en title verschijnt als tooltip zodra de muis boven de afbeelding staat. Wil je zichtbare informatie bij een afbeelding geven, gebruik dan een bijschrift.

Ook knoppen, links en formuliervelden zonder zichtbare tekst hebben een toegankelijke naam nodig. Daarvoor gebruik je de attributen aria-label of aria-labelledby.

<button type="submit" aria-label="Formulier verzenden">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

De verschillende soorten afbeeldingen

Hoe een goede alt-tekst eruitziet, hangt af van de rol die een afbeelding op de pagina speelt. Vraag je vóór het schrijven af: wat zou iemand missen die deze afbeelding niet kan zien?

Informatieve afbeeldingen

Informatieve afbeeldingen brengen inhoud over, bijvoorbeeld foto's, illustraties of logo's. Beschrijf wat relevant is voor de boodschap van de pagina, niet elk detail.

<img src="logo.svg" alt="Eye-Able logo">

Een paar voorbeelden van zwakke en betere alt-teksten:

• In plaats van "Foto" beter "Medewerker werkt op een laptop in een licht kantoor".

• In plaats van "Logo" beter "Eye-Able logo".

• In plaats van "Afbeelding van een grafiek" beter "Staafdiagram met de omzetcijfers van 2025".

Bevat een afbeelding tekst, zoals een banner of een citaat, dan moet de alt-tekst die tekst bevatten.

Grafieken en diagrammen

Bij eenvoudige grafieken hoort de kernboodschap in de alt-tekst, bijvoorbeeld: "Staafdiagram: partij A kreeg 34,0% van de stemmen, partij B 28,0%."

Complexe grafieken bevatten te veel informatie voor een korte alt-tekst. Noem dan in de alt-tekst het type grafiek en het onderwerp, en beschrijf de gegevens in de tekst onder de grafiek of in een tabel. Verwijs daarnaar in de alt-tekst:

<img src="bevolking.png" alt="Staafdiagram van het aantal inwoners per provincie. De cijfers volgen in de tekst hieronder.">

Belangrijke cijfers horen altijd ook in de tekst te staan, zodat iedereen ze kan vinden.

Functionele afbeeldingen

Functionele afbeeldingen starten een actie of leiden naar een bestemming: iconen in knoppen, gelinkte logo's of pijlen in een slider. Hun alt-tekst beschrijft de functie, niet het uiterlijk.

<a href="https://eye-able.com/nl/">
  <img src="logo.svg" alt="Eye-Able homepage">
</a>

Een paar voorbeelden:

• Vergrootglas-icoon: "Zoeken starten", niet "Vergrootglas".

• Diskette-icoon: "Opslaan", niet "Diskette".

• Pijl in een slider: "Volgende pagina", niet "Pijl naar rechts".

• Gelinkt logo: "Homepage" of "Eye-Able homepage", niet "Logo".

Decoratieve afbeeldingen

Decoratieve afbeeldingen voegen geen informatie toe, bijvoorbeeld achtergrondpatronen, scheidingslijnen of sfeerbeelden die alleen herhalen wat de tekst al zegt. Ze krijgen een leeg alt-attribuut:

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

Het attribuut blijft staan, maar blijft leeg. Ontbreekt het alt-attribuut helemaal, dan lezen veel schermlezers in plaats daarvan de bestandsnaam voor.

Checklist: heeft een afbeelding alt-tekst nodig?

Loop deze vragen op volgorde door en stop bij het eerste "ja":

1. Bevat de afbeelding tekst die nergens anders staat? Dan bevat de alt-tekst die tekst.

2. Is de afbeelding onderdeel van een link of knop? Dan beschrijft de alt-tekst de functie.

3. Voegt de afbeelding informatie toe die niet in de omringende tekst staat? Dan beschrijft de alt-tekst die informatie.

4. Is de afbeelding puur decoratief of al volledig beschreven in de tekst? Gebruik dan een leeg alt-attribuut: alt="".

Zo schrijf je een goede alt-tekst

1. Begin niet met "Afbeelding van" of "Foto van". Schermlezers kondigen al aan dat er een afbeelding volgt. Noem het type alleen als het ertoe doet, bijvoorbeeld "Illustratie" of "Screenshot".

2. Houd het kort. Eén tot twee zinnen is genoeg. Mik op ongeveer 80 tekens en blijf onder ongeveer 120. Veel brailleleesregels tonen 40 tot 80 tekens tegelijk, waardoor langere teksten vermoeiend zijn om te lezen.

3. Denk aan de context. Dezelfde foto kan op verschillende pagina's een andere alt-tekst nodig hebben. Op een teampagina telt de naam van de persoon, in een artikel over thuiswerken de werksituatie.

4. Vermijd keyword stuffing. Alt-tekst is geschreven voor mensen. Een natuurlijke beschrijving helpt ook zoekmachines het meest.

5. Laat copyrightvermeldingen en fotocredits weg. Die horen in een bijschrift of in het colofon, niet in de alt-tekst.

6. Controleer spelling, grammatica en interpunctie. Schermlezers lezen fouten mee voor en gebruiken leestekens voor pauzes.

7. Vraag om feedback. Laat blinde of slechtziende mensen je alt-teksten controleren. Of vraag iemand die de afbeelding niet heeft gezien, of de beschrijving het juiste beeld geeft.

Wat gebeurt er als alt-tekst ontbreekt?

Heeft een informatieve afbeelding geen alt-tekst, dan lezen schermlezers vaak de bestandsnaam voor, bijvoorbeeld "img123.jpg" of "IMG_4711_final.png". Dat zegt gebruikers niets. In het ergste geval kunnen ze een link of knop helemaal niet gebruiken, omdat niet duidelijk is waar die naartoe leidt.

De gevolgen op een rij:

• Blinde en slechtziende gebruikers missen informatie of lopen vast.

• De website voldoet niet aan WCAG-succescriterium 1.1.1.

• De website voldoet mogelijk niet aan wettelijke toegankelijkheidseisen, wat kan leiden tot klachten of boetes.

• Zoekmachines begrijpen de afbeeldingen minder goed.

Alt-tekst en wetgeving

Sinds 28 juni 2025 geldt in de EU de European Accessibility Act (EAA) voor veel digitale producten en diensten, zoals webwinkels, bankdiensten en e-books. Nederlandse overheidsinstanties zijn al sinds 2018 wettelijk verplicht hun websites toegankelijk te maken.

De technische basis is de Europese norm EN 301 549, die verwijst naar WCAG-niveau AA. Tekstalternatieven voor afbeeldingen zijn een kernvereiste. Veel organisaties moeten bovendien een toegankelijkheidsverklaring publiceren waarin bekende drempels worden genoemd, ook ontbrekende alt-teksten.

Omdat er voortdurend nieuwe afbeeldingen bijkomen, is een eenmalige controle niet genoeg. Regelmatige monitoring helpt om ontbrekende of lege alt-teksten te vinden voordat ze een probleem worden.

WCAG en alt-tekst

Deze WCAG-succescriteria zijn het belangrijkst voor afbeeldingen:

• 1.1.1 Niet-tekstuele content (niveau A): Elke informatieve en functionele afbeelding heeft een tekstalternatief nodig. Decoratieve afbeeldingen moeten verborgen zijn voor hulpmiddelen.

• 1.4.5 Afbeeldingen van tekst (niveau AA): Gebruik waar mogelijk echte tekst in plaats van afbeeldingen van tekst. Is een afbeelding van tekst onvermijdelijk, dan moet de alt-tekst die tekst bevatten.

• 2.4.4 Linkdoel (niveau A): Is een afbeelding de enige inhoud van een link, dan moet de alt-tekst duidelijk maken waar de link naartoe leidt.

Conclusie

Een goede alt-tekst is kort, past bij de context en beschrijft wat iemand zonder de afbeelding zou missen. Informatieve afbeeldingen krijgen een beschrijving, functionele afbeeldingen een beschrijving van hun functie en decoratieve afbeeldingen een leeg alt-attribuut. Met deze drie regels maak je je afbeeldingen toegankelijk voor iedereen en ondersteun je tegelijk je SEO.

Hoeveel afbeeldingen op jouw website missen een alt-tekst? Start een gratis toegankelijkheidscheck met Eye-Able en ontvang je resultaat binnen 2 minuten.

FAQ: alt-tekst

Wat is alt-tekst?

Alt-tekst is een kort tekstalternatief voor een afbeelding. Schermlezers lezen de tekst voor, zodat blinde en slechtziende mensen de informatie van de afbeelding krijgen. Je voegt hem toe in het alt-attribuut in HTML of in het alt-tekstveld van een CMS.

Hoe lang moet alt-tekst zijn?

Ongeveer 80 tekens is een goede richtlijn, en veel meer dan ongeveer 120 hoort het niet te zijn. Heeft een afbeelding een langere beschrijving nodig, zoals een complexe grafiek, zet die dan in de omringende tekst en verwijs ernaar in de alt-tekst.

Hebben decoratieve afbeeldingen alt-tekst nodig?

Nee. Decoratieve afbeeldingen krijgen een leeg alt-attribuut (alt=""), zodat schermlezers ze overslaan. Laat het attribuut niet helemaal weg, want dan lezen veel schermlezers de bestandsnaam voor.

Wat zijn de meest gemaakte fouten bij alt-tekst?

Ontbrekende alt-teksten, algemene beschrijvingen zoals "afbeelding" of "foto", bestandsnamen als alt-tekst, keyword stuffing en beschrijvingen bij puur decoratieve afbeeldingen. Ook vaak: beschrijven hoe een knop eruitziet in plaats van wat hij doet.

Helpt alt-tekst bij SEO?

Ja. Zoekmachines gebruiken alt-tekst om te begrijpen wat een afbeelding laat zien. Dat kan de zichtbaarheid in de zoekresultaten voor afbeeldingen verbeteren. Het beste werkt een natuurlijke, treffende beschrijving, geen opsomming van zoekwoorden.

Kan AI alt-tekst schrijven?

AI-tools kunnen alt-teksten voorstellen en tijd besparen bij veel afbeeldingen. Ze kennen echter de context van je pagina en het doel van een afbeelding niet. Controleer en pas automatisch gegenereerde alt-teksten daarom altijd aan voordat je ze publiceert.

Kan Eye-Able controleren of mijn alt-teksten kloppen?

Ja. De AI Tests, een uitbreidingsmodule voor Eye-Able Report, controleren niet alleen of er een alt-tekst is. De AI bekijkt de afbeelding zelf en controleert of de alt-tekst die goed beschrijft. Bij elke foutieve alt-tekst krijg je een uitleg van het probleem en een voorgestelde correctie die je kunt controleren en overnemen.

Hoe test ik alt-tekst?

Gebruik een schermlezer zoals NVDA op Windows of VoiceOver op macOS en iOS en luister hoe je afbeeldingen worden aangekondigd. Een automatische toegankelijkheidscheck, zoals met het Eye-Able platform, vindt ontbrekende en lege alt-teksten op je hele website. Of een alt-tekst in de context echt helpt, laat je uiteindelijk altijd een mens beslissen.