Hoe alt-tekst te schrijven: een praktische gids voor ontwikkelaars en contentteams

Volgens het WebAIM Million 2025-rapport heeft 55,5% van alle geanalyseerde homepages ontbrekende alternatieve tekst — en van die fouten heeft 44% betrekking op gelinkte afbeeldingen, wat de navigatie voor schermlezers volledig onbruikbaar maakt. Dat is geen nicheprobleem. Dat is de helft van het web die blinde en slechtziende gebruikers achterlaat voor afbeeldingen die niets zeggen. Als je team afbeeldingen uitbrengt zonder zorgvuldig na te denken over alt-tekst, faal je niet alleen een compliance-vakje — je vertelt een aanzienlijk deel van je publiek dat hun ervaring er niet toe doet.

Wat Alt-tekst Eigenlijk Is (en Waarom Het Meer Is Dan Een Tag)

Alt-tekst, kort voor alternatieve tekst, is een geschreven beschrijving die is ingebed in het alt-attribuut van een HTML-<img>-element. Wanneer een schermlezer een afbeelding tegenkomt, leest hij de alt-tekst hardop voor aan de gebruiker. Wanneer een afbeelding niet wordt geladen — door een trage verbinding, een kapotte URL of een contentblocker — wordt de alt-tekst in de plaats daarvan weergegeven. Het wordt ook geïndexeerd door zoekmachines en is daarmee een stille maar betekenisvolle SEO-signaal.

Maar hier gaat het bij veel teams mis: alt-tekst is niet alleen een vangnet. Het is de primaire manier waarop blinde en slechtziende gebruikers — grofweg 43,3 miljoen mensen wereldwijd die blind zijn, en 295 miljoen met matige tot ernstige slechtziendheid — visuele content op het web ervaren. Schermlezers zoals NVDA en JAWS (de twee meest gebruikte desktop-schermlezers) kondigen alt-tekst aan zodra de focus een afbeelding bereikt. Als die tekst afwezig, betekenisloos of overbodig is, gaat de gebruikerservaring direct achteruit.

Onderzoek naar blinde en slechtziende gebruikers schetst een somber beeld van wat er in de praktijk gebeurt. Sommige gebruikers geven aan afbeeldingen op websites volledig te negeren omdat de alt-tekst in hun ervaring nooit nuttig is. Anderen slaan productafbeeldingen op e-commercesites over en vertrouwen in plaats daarvan op gebruikersreviews, omdat alt-tekst zoals "image001.jpg" of "photo" hun niets vertelt. Dat is geen schermlezerprobleem — dat is een contentprobleem, en het is er een dat je team kan oplossen.

Alt-tekst begrijpen als een contentverantwoordelijkheid — niet alleen een ontwikkelaarstaak — is de eerste mentale verschuiving die elk team moet maken. De ontwikkelaar implementeert het attribuut; het contentteam begrijpt de context. Beide zijn essentieel om het goed te doen.

Het Juridische En Compliance-landschap

Alt-tekst is niet optioneel als je juridische risico’s serieus neemt. WCAG Succescriterium 1.1.1 (Niet-tekstuele content) is een Level A-vereiste — de laagste, meest fundamentele laag van compliance. Het niet halen ervan betekent dat je elke formele toegankelijkheidsaudit niet haalt. In de Verenigde Staten is de ADA in duizenden zaken toegepast op websites, met alleen al in 2024 4.605 ADA-rechtszaken over websites. Ontbrekende alt-tekst is een van de meest aangehaalde overtredingen in sommatiebrieven, juist omdat deze gemakkelijk te detecteren is, objectief meetbaar is en direct de toegang tot kerncontent blokkeert.

Naast de ADA is de European Accessibility Act (EAA) op 28 juni 2025 afdwingbaar geworden. Als je organisatie klanten in de EU bedient, kan niet-naleving leiden tot boetes tot €100.000 of 4% van de jaarlijkse omzet. WCAG 2.2 Level AA wordt algemeen erkend als de norm voor EAA-naleving, en de alt-teksteisen onder criterium 1.1.1 zijn ongewijzigd ten opzichte van eerdere versies — alle informatieve afbeeldingen moeten programmatisch bepaalbare tekstalternatieven hebben.

In Canada schrijft de Accessibility for Ontarians with Disabilities Act (AODA) op vergelijkbare wijze WCAG-conformiteit voor voor organisaties in de publieke en private sector. Section 508 in de Amerikaanse federale context heeft eigen, parallelle vereisten. De conclusie is in alle rechtsgebieden hetzelfde: alt-tekst is geen nice-to-have, en de regelgeving wordt strenger, niet soepeler.

WCAG 1.1.1 is Level A — de meest basale compliance-laag. Het niet halen ervan betekent dat je elke toegankelijkheidsaudit niet haalt, en het is de makkelijkste overtreding voor geautomatiseerde tools en juridische teams om te detecteren.

Het Besliskader: Welke Afbeeldingen Wat Nodig Hebben

Een van de meest voorkomende misvattingen is dat elke afbeelding een tekstbeschrijving nodig heeft. Dat is onjuist — en onnodige alt-tekst toevoegen aan decoratieve afbeeldingen maakt de ervaring voor schermlezergebruikers juist slechter, omdat zij dan moeten luisteren naar ruis die geen waarde toevoegt. De echte vaardigheid is weten in welke categorie elke afbeelding valt. Hier is een praktisch kader:

• Informatieve afbeeldingen — Foto’s, illustraties of grafieken die inhoud of betekenis overbrengen die niet in de omringende tekst aanwezig is. Deze vereisen beschrijvende alt-tekst die dezelfde informatie communiceert als de afbeelding.
• Functionele afbeeldingen — Afbeeldingen die worden gebruikt als knoppen, links of bedieningselementen (bijv. een vergrootglasicoon dat een zoekopdracht verstuurt, of een logo dat naar de homepage linkt). Alt-tekst moet de functie beschrijven, niet het visuele uiterlijk: alt='Search', niet alt='Magnifying glass icon'.
• Decoratieve afbeeldingen — Visuele versieringen die esthetische waarde toevoegen maar geen betekenis hebben: achtergrondpatronen, scheidingslijnen, puur decoratieve illustraties. Deze moeten een leeg alt-attribuut hebben (alt=''), wat de schermlezer vertelt de afbeelding volledig over te slaan.
• Afbeeldingen van tekst — Screenshots of grafieken die woorden bevatten. Best practice is om deze helemaal te vermijden en in plaats daarvan echte, opgemaakte tekst te gebruiken. Wanneer ze onvermijdelijk zijn, moet de alt-tekst de tekst in de afbeelding letterlijk weergeven.
• Complexe afbeeldingen — Diagrammen, grafieken, kaarten en infographics met veel data. Een korte samenvattende alt-tekst is vereist, plus een langere gestructureerde beschrijving in de paginacontent of gelinkt vanaf de afbeelding.

Let op dat lege alt-tekst (alt='') niet hetzelfde is als een ontbrekend alt-attribuut. Een afbeelding zonder alt-attribuut kan ertoe leiden dat de schermlezer de bestandsnaam of URL van de afbeelding voorleest — wat bijna altijd erger is dan stilte. Neem het attribuut altijd op, zelfs wanneer de waarde ervan bewust leeg is.

Alt-tekst Schrijven Die Echt Werkt: Praktische Regels

Goede alt-tekst is moeilijker te schrijven dan het lijkt. Dit zijn de concrete regels die nuttige beschrijvingen scheiden van ruis:

• Houd het beknopt. Streef naar minder dan 125 tekens. Schermlezers zoals JAWS en NVDA kunnen langere alt-tekst halverwege de zin afkappen, waardoor precies de informatie wegvalt waar je moeite voor hebt gedaan. Als de afbeelding zo complex is dat er meer nodig is, is dat een signaal dat je een aanvullende lange beschrijving nodig hebt.
• Begin niet met "Afbeelding van" of "Foto van". Schermlezers kondigen automatisch aan dat een element een afbeelding is voordat ze de alt-tekst voorlezen. alt='Image of a smiling woman' schrijven zorgt ervoor dat de schermlezer "image, image of a smiling woman" zegt — wat dubbelop is en de tijd van de luisteraar verspilt.
• Beschrijf de betekenis, niet alleen het uiterlijk. Alt-tekst moet dezelfde informatie of functie communiceren als de afbeelding. Als je een grafiek van Q3-omzetgroei toont, schrijf dan niet alt='Bar chart'. Schrijf iets als alt='Bar chart showing Q3 revenue up 22% year-over-year', en geef vervolgens de volledige data in de omringende tekst.
• Stem af op de context. Dezelfde foto kan verschillende alt-tekst vereisen, afhankelijk van waar hij wordt gebruikt. Een foto van een laptop op een bureau in een "Maak kennis met ons team"-sectie kan alt-tekst nodig hebben die de werkplek beschrijft; gebruikt in een productoverzicht moet hij de specificaties en het uiterlijk van de laptop beschrijven.
• Prop geen zoekwoorden. Alt-tekst wordt geïndexeerd door zoekmachines, maar het volstoppen met zoekwoorden is zowel een slechte gebruikerservaring als in strijd met de intentie van WCAG. Schrijf in de eerste plaats voor de gebruiker.
• Gebruik correcte grammatica en interpunctie. Schermlezers zetten tekst om in spraak, en interpunctie beïnvloedt tempo en duidelijkheid. Een zinsfragment klinkt minder natuurlijk dan een volledige gedachte.

Alt-tekst hoeft geen kille, objectieve beschrijving te zijn. Ze kan — en moet soms — nuance, context en zelfs emotie overbrengen wanneer die kwaliteiten relevant zijn voor de ervaring van de gebruiker met de content.

Codevoorbeelden: Goed En Fout

Theorie is één ding. Laten we kijken hoe deze principes uitpakken in echte HTML.

Informatieve afbeelding — slechte alt-tekst:

<img src='team-photo.jpg' alt='photo'>

Informatieve afbeelding — goede alt-tekst:

<img src='team-photo.jpg' alt='Accsible engineering team gathered around a whiteboard during a product sprint meeting'>

Functionele afbeelding (gelinkt logo) — slechte alt-tekst:

<a href='/'>
  <img src='logo.svg' alt='logo'>
</a>

Functionele afbeelding (gelinkt logo) — goede alt-tekst:

<a href='/'>
  <img src='logo.svg' alt='Accsible — return to homepage'>
</a>

Decoratieve afbeelding — correcte implementatie:

<img src='decorative-wave-divider.svg' alt='' role='presentation'>

Complexe afbeelding (grafiek) — correcte aanpak met gelinkte lange beschrijving:

<img
  src='q3-revenue-chart.png'
  alt='Bar chart: Q3 revenue up 22% YoY. Full data table below.'
  aria-describedby='chart-description'
>
<div id='chart-description'>
  <!-- Full tabular data or structured text description here -->
</div>

Voor icoonknoppen zonder zichtbaar tekstlabel gebruik je aria-label op de knop zelf en stel je alt='' in op de icoonafbeelding om dubbele aankondiging te voorkomen:

<button aria-label='Close dialog'>
  <img src='close-icon.svg' alt=''>
</button>

Specifieke Soorten Afbeeldingen Afhandelen

Productafbeeldingen in e-commerce: Dit zijn een van de meest kritieke alt-tekstcontexten op het web. Blinde gebruikers zijn volledig afhankelijk van alt-tekst om te begrijpen wat ze overwegen te kopen. Alleen de productnaam beschrijven is onvoldoende. Neem materiaal, kleur, belangrijke visuele kenmerken en eventuele varianten die visueel te onderscheiden zijn op. Bijvoorbeeld: alt='Slim-fit wool blazer in navy blue with gold buttons and notched lapels' is veel nuttiger dan alt='Blazer'.

Logo’s: Logo’s zijn nooit decoratief. Ze vereisen alt-tekst die de naam van de organisatie en eventuele betekenisvolle slogan of beschrijving die in het logo voorkomt, bevat. Als het logo ook een link is, moet de alt-tekst de bestemming beschrijven, zoals hierboven besproken.

Infographics: Deze zijn berucht lastig goed te behandelen. Eén alt-attribuut kan het informatiegewicht van een complexe infographic niet dragen. De juiste aanpak is een korte, samenvattende alt-tekst (bijv. alt='Infographic summarizing five steps of our onboarding process') in combinatie met een gestructureerde tekstversie van dezelfde informatie die zichtbaar op de pagina staat.

Afbeeldingen van mensen: Namen opnemen wanneer mensen worden geïdentificeerd is nuttig, vooral in redactionele of nieuwscontexten. Beschrijf wat de persoon doet of wat de afbeelding communiceert, niet alleen hun fysieke uiterlijk. Vermijd beschrijvingen die een persoon reduceren tot hun demografische kenmerken.

Achtergrond- en CSS-afbeeldingen: Afbeeldingen die via CSS background-image worden toegepast, hebben geen beschikbaar alt-attribuut, dus ze mogen alleen worden gebruikt voor echt decoratieve doeleinden. Als een afbeelding betekenis moet overbrengen, hoort hij in de HTML als een <img>-element met correcte alt-tekst.

Alt-tekst In Je Workflow Inbouwen

Een van de redenen dat alt-tekst op schaal kapot blijft, is dat het wordt behandeld als een laatste-stap-nagedachte — iets dat een geautomatiseerde scanner na de lancering markeert, waarna een haastige patch volgt. De oplossing is om alt-tekst eerder in je content- en ontwikkelworkflows te plaatsen.

Voor contentteams betekent dit het opstellen van een huisstijl voor alt-tekst die je meest voorkomende soorten afbeeldingen dekt. Als je site productafbeeldingen, hero-afbeeldingen bij blogposts, eventfoto’s en datagrafieken publiceert, verdient elke categorie een gedocumenteerde standaard met voorbeelden van goede en slechte beschrijvingen. Wanneer schrijvers en redacteuren afbeeldingen uploaden, zouden ze op hetzelfde moment aan alt-tekst moeten denken als aan bijschriften en beeldselectie.

Voor ontwikkelaars betekent dit dat je alt-tekstvelden in CMS-templates opneemt en ze markeert als verplicht — niet optioneel — voor niet-decoratieve afbeeldingscomponenten. Wanneer een component een afbeelding accepteert, moet de interface vragen om alt-tekst en onderscheid maken tussen informatieve en decoratieve contexten. Vermijd het automatisch invullen van het alt-attribuut met de bestandsnaam van de afbeelding of de bijschrifttekst; dat zijn verschillende dingen met verschillende doelen.

Voor QA- en compliance-managers kunnen geautomatiseerde scantools (inclusief toegankelijkheidsoverlays zoals Accsible) afbeeldingen met ontbrekende of lege alt-attributen op schaal detecteren en ze in realtime markeren. Maar geautomatiseerde tools kunnen niet beoordelen of de bestaande alt-tekst daadwerkelijk betekenisvol is — dat oordeel vereist een menselijke reviewer. Bouw handmatige steekproeven in je toegankelijkheidsauditritme in en neem beoordeling van de kwaliteit van alt-tekst op in de acceptatiecriteria van nieuwe features waarbij afbeeldingen betrokken zijn.

Wanneer dezelfde afbeelding op meerdere pagina’s of in meerdere contexten wordt hergebruikt, bedenk dan dat de juiste alt-tekst kan veranderen. Een foto van een bedrijfshoofdkantoor die wordt gebruikt op een "Contact"-pagina en op een "Over onze cultuur"-pagina kan verschillende beschrijvingen verdienen, afhankelijk van wat elke pagina probeert te communiceren. CMS-platforms zoals WordPress staan postniveau-overschrijvingen van alt-tekst toe, precies om deze reden.

Veelgemaakte Fouten Om Te Vermijden

Zelfs teams die alt-tekst serieus nemen, maken terugkerende fouten. Dit zijn de patronen waar je actief op moet letten:

• De bestandsnaam als alt-tekst gebruiken. Een alt-tekst van IMG_4521.jpg of hero-banner-v3-final.png is erger dan nutteloos — het geeft schermlezergebruikers actief het signaal dat niemand aan hen heeft gedacht.
• Alt-tekst identiek maken aan het bijschrift ernaast. Bijschriften en alt-tekst bedienen verschillende doelgroepen en verschillende doelen. Een bijschrift is aanvullende context voor ziende gebruikers; alt-tekst vervangt de afbeelding voor gebruikers die deze niet kunnen zien. Ze kunnen overlappen, maar zouden niet onderling gekopieerd moeten worden.
• Alt-tekst aan elke afbeelding toevoegen zonder onderscheid. Decoratieve afbeeldingen een beschrijvende alt-tekst geven, dwingt schermlezergebruikers door irrelevante content heen. De discipline om te beslissen "heeft deze afbeelding een beschrijving nodig, en zo ja, welke?" is net zo belangrijk als het schrijven zelf.
• Vage, contextloze beschrijvingen schrijven. Alt-tekst zoals alt='man smiling' voor een foto van je CEO tijdens een productlancering vertelt de gebruiker bijna niets over waarom de afbeelding er is of wat deze in context betekent.
• Alt-tekst op SVG’s negeren. Inline SVG’s hebben ook toegankelijke namen nodig, meestal via aria-label op het <svg>-element of een <title>-element als eerste child, gecombineerd met role='img'.

<!-- SVG with accessible name -->
<svg role='img' aria-labelledby='svg-title'>
  <title id='svg-title'>Quarterly revenue growth, Q1 to Q4 2024</title>
  <!-- SVG paths -->
</svg>

Belangrijkste Punten

• Niet elke afbeelding heeft een tekstbeschrijving nodig. Decoratieve afbeeldingen moeten alt='' gebruiken om schermlezers te vertellen dat ze moeten worden overgeslagen — maar laat het alt-attribuut nooit helemaal weg, anders kan de schermlezer de bestandsnaam aankondigen.
• Houd alt-tekst onder de 125 tekens voor informatieve afbeeldingen; schermlezers kunnen langere strings afkappen, en beknoptheid verbetert het luisterbegrip. Combineer voor complexe afbeeldingen een korte alt-samenvatting met een volledige tekstbeschrijving in de paginacontent.
• Beschrijf functie, niet alleen vorm. Voor gelinkte en functionele afbeeldingen moet alt-tekst de gebruiker vertellen wat er zal gebeuren of waar hij naartoe gaat — niet hoe de afbeelding eruitziet. Communiceer voor informatieve afbeeldingen de betekenis, niet alleen de visuele inhoud.
• Bouw alt-tekst vroeg in je workflow in, niet als een fix na de lancering. Maak het een verplicht veld in je CMS, neem het op in contentstijlguides en voeg kwaliteitscontrole toe aan je QA-proces — geautomatiseerde tools detecteren ontbrekende alt-tekst, maar mensen moeten beoordelen of die betekenisvol is.
• De juridische en regelgevende inzet is reëel en stijgend. ADA-rechtszaken waarin ontbrekende alt-tekst wordt aangehaald, liepen in 2024 in de duizenden, en de Accessibility Act van de EU is nu van kracht. Alt-tekst als nagedachte behandelen is geen houdbare compliance-strategie.