Elke afbeelding op je website kan een korte geschreven beschrijving meekrijgen: de alt-tekst (van het Engelse "alternative text"). De meeste bezoekers zien die nooit. Maar voor iemand die blind is en een schermlezer gebruikt (software die het scherm voorleest), is die beschrijving de afbeelding. Een goede beschrijving vertelt wat een ziende bezoeker in één oogopslag ziet. Een ontbrekende of slordige laat een gat achter, of erger: een reeks onzin zoals "IMG_4032.jpg". In dit artikel lees je wie afbeeldingsbeschrijvingen gebruikt, hoe je eenvoudig beslist wat je schrijft, en zie je veel goede en slechte voorbeelden die je kunt overnemen. Tot slot lees je waar het veld voor de beschrijving zit in de bekendste sitebouwers.
Wat alt-tekst is en wie hem gebruikt
Alt-tekst is een stukje tekst dat in de code van de pagina bij een afbeelding hoort. De browser toont het niet op het scherm, maar andere hulpmiddelen gebruiken het wel:
- Gebruikers van een schermlezer. Mensen die blind of slechtziend zijn, horen de beschrijving wanneer ze bij de afbeelding komen.
- Mensen met een trage of beperkte verbinding. Laadt een afbeelding niet, dan tonen veel browsers de beschrijving in de plaats.
- Mensen die afbeeldingen uitschakelen om data te sparen of minder afgeleid te zijn.
- Zoekmachines. Google zegt dat het alt-tekst gebruikt, samen met de afbeelding en de tekst eromheen, om te begrijpen wat een afbeelding toont. Zie de richtlijnen van Google voor afbeeldingen.
Ontbrekende beschrijvingen horen bij de vaakste problemen op het web. In de WebAIM Million 2026, een automatische controle van een miljoen startpagina’s, had 53,1% van de pagina’s afbeeldingen zonder alt-tekst. Het goede nieuws: hiervoor heb je geen ontwikkelaar nodig. In de meeste sitebouwers voeg je zelf in een minuut een beschrijving toe of verbeter je er een.
Beslis eerst: waarvoor dient deze afbeelding?
Vraag je af wat de afbeelding op deze pagina doet, voordat je iets schrijft. Het W3C, de organisatie achter de webstandaarden, publiceert een beslisboom voor alt-tekst die precies op die vraag steunt. Hier is een vereenvoudigde versie.
- Staat er tekst op de afbeelding? Dan herhaalt de beschrijving die tekst.
- Is het een link of een knop? Dan beschrijf je waar hij naartoe gaat of wat hij doet, niet hoe hij eruitziet.
- Voegt ze informatie toe aan de pagina? Dan beschrijf je die informatie in een korte zin.
- Toont ze ingewikkelde informatie, zoals een grafiek of kaart? Dan geef je een korte beschrijving en zet je de volledige informatie in tekst vlakbij.
- Is ze alleen versiering, of zegt de tekst ernaast al hetzelfde? Dan krijgt ze een lege beschrijving, zodat schermlezers haar overslaan.
Dezelfde foto kan op verschillende pagina’s een andere beschrijving nodig hebben. Een foto van een strand is versiering bij een blogartikel over timemanagement, en essentiële informatie op de boekingspagina van een vakantiehuis aan zee.
Informatieve afbeeldingen: zeg wat ertoe doet
De meeste afbeeldingen op de site van een kleine onderneming zijn informatief: productfoto’s, foto’s van je zaak, je team, je werk. Beschrijf wat een bezoeker moet weten, zoals je het aan een vriend aan de telefoon zou vertellen.
Productfoto’s in een webshop
Een klant kan het product niet vastnemen. De foto beantwoordt vragen: welke kleur, welke vorm, hoe ziet het eruit in gebruik? Je beschrijving beantwoordt dezelfde vragen.
- Slecht: "product1.jpg"
- Slecht: "Mok"
- Slecht: "Beste mok kopen goedkope mok keramiek mok cadeau mok koffiemok"
- Goed: "Handgemaakte keramische mok in zeegroen, met gespikkeld glazuur en een breed oor"
Toont je shop meerdere foto’s van één product, geef elke foto dan een eigen beschrijving: "Dezelfde mok van bovenaf, met de ongeglazuurde rand", "De mok in twee handen, om de grootte te tonen". Vijf keer de productnaam herhalen vertelt een luisteraar niets nieuws.
Een teamfoto
- Slecht: "Team"
- Slecht: "Groep lachende mensen"
- Goed: "Ons team van vijf voor het atelier, met oprichter Lotte in het midden"
Op een pagina "Over ons" is het belangrijk wie op de foto staat. Op een vacaturepagina telt de sfeer misschien meer: "Het team luncht samen aan een lange tafel in de tuin".
Een foto die de sfeer zet
Voor iemand die een restaurant kiest, is een foto van het terras informatie: "Zonnig terras met acht tafels onder een grote plataan". Dezelfde soort foto als achtergrond achter een titel is meestal versiering.
Functionele afbeeldingen: logo’s, pictogrammen en knoppen
Is een afbeelding een link of een knop, dan is de beschrijving de naam ervan. Een schermlezer kondigt ze aan als "link" of "knop", gevolgd door jouw tekst. Die tekst moet dus zeggen wat er gebeurt als je erop klikt.
- Logo dat naar de startpagina linkt. Slecht: "Logo". Slecht: "Logo met groen blad". Goed: "Bakkerij Verbeke, startpagina", of gewoon "Bakkerij Verbeke". Mensen weten dat het logo bovenaan naar de startpagina gaat; ze hebben de naam van de zaak nodig.
- Vergrootglas op een zoekknop. Slecht: "Vergrootglas". Goed: "Zoeken".
- Pictogrammen van sociale media. Slecht: "Instagram-icoon". Goed: "Bakkerij Verbeke op Instagram".
- Een printerpictogram. Slecht: "Printer". Goed: "Dit recept afdrukken".
Staat de afbeelding in een link die al zichtbare tekst heeft, zoals een productkaart met een foto en de productnaam, dan kan de foto vaak een lege beschrijving krijgen. Zo wordt de naam niet twee keer voorgelezen. Onze herstelgids over linkteksten legt uit waarom links een duidelijke naam nodig hebben.
Afbeeldingen van tekst, versiering en ingewikkelde afbeeldingen
Afbeeldingen van tekst
Een banner met "Zomersolden, 20% korting op alles tot 31 augustus" is tekst, ook als het een afbeelding is. De beschrijving bevat dezelfde woorden: "Zomersolden, 20% korting op alles tot 31 augustus". Nog beter: zet de tekst als echte tekst op de pagina, over de afbeelding heen. Echte tekst kun je vergroten, vertalen en terugvinden via zoekmachines, en hij blijft scherp op elk scherm.
Versiering
Achtergrondpatronen, scheidingslijnen, abstracte vormen en stockfoto’s die alleen een sfeer zetten, zijn versiering. Die krijgen een lege beschrijving. In code is dat alt="", met niets tussen de aanhalingstekens. Dat is iets anders dan de beschrijving helemaal weglaten: zonder alt lezen sommige schermlezers de bestandsnaam voor, en dat wil je net vermijden.
Grafieken, schema’s en kaarten
Een grafiek bevat te veel voor één korte beschrijving. Geef hem twee delen:
- Een korte beschrijving die zegt wat voor grafiek het is en wat de hoofdboodschap is: "Staafdiagram: de onlinebestellingen verdubbelden tussen 2024 en 2026".
- De volledige informatie in tekst bij de grafiek, zoals een korte alinea of een tabel met de cijfers.
Die tekstversie helpt veel meer mensen dan alleen gebruikers van een schermlezer. Veel lezers vinden een zin als "De bestellingen stegen van 1.200 in 2024 naar 2.450 in 2026" makkelijker dan staven.
Lengte, toon en wat je beter niet doet
Er is geen strikte maximumlengte, maar korte beschrijvingen werken het best. Wie luistert, kan niet snel scannen, en een schermlezer leest alles in één keer voor. Mik op één zin, vaak minder dan vijftien woorden. Sommige sitebouwers hebben hun eigen grens: Shopify staat tot 512 tekens toe maar raadt er hoogstens 125 aan, en Squarespace staat 250 tekens toe.
Tips voor de toon:
- Schrijf in de taal van de pagina, met gewone woorden.
- Begin met het belangrijkste. "Rode winterjas met kap" is beter dan "Een jas, die rood is, voor de winter en met een kap".
- Noem het soort afbeelding alleen als dat ertoe doet: "Olieverfschilderij van de haven", "Schermafbeelding van het bestelformulier", "Handgetekende kaart".
Wat je beter vermijdt:
- "Afbeelding van" of "foto van". De schermlezer zegt al dat het een afbeelding is, dus de luisteraar hoort "afbeelding, afbeelding van een mok".
- Zoekwoorden opstapelen. Lijsten met zoektermen zijn vermoeiend om te horen en kunnen je site volgens Google op spam doen lijken. Google noemt zelf een rij als "puppy dog baby dog pup pups" slecht, en "Dalmatian puppy playing fetch" (een dalmatiërpup die een bal apporteert) het beste.
- Bestandsnamen en cameracodes zoals "DSC_0045" of "hero-banner-definitief-v2".
- Het bijschrift of de tekst ernaast letterlijk herhalen. Staat er onder de foto al "Lotte in haar atelier", dan kan de beschrijving iets anders toevoegen of leeg blijven.
- Gokken of verzinnen. Heeft een hulpmiddel een beschrijving voor je geschreven, controleer ze dan. Automatische beschrijvingen missen vaak wat ertoe doet, zoals wie iemand is.
Waar je beschrijvingen invult in je sitebouwer
Menunamen veranderen soms en kunnen in het Nederlands anders heten. Zoek naar een veld als "Alt-tekst", "Alternatieve tekst" of "Afbeeldingsbeschrijving" (in het Engels "Alt text" of "Alternative text"). Dit zijn de huidige plaatsen in de bekendste tools.
- WordPress. Selecteer het afbeeldingsblok. Typ in het instellingenpaneel rechts, bij de afbeeldingsinstellingen, in het veld "Alternatieve tekst". Je kunt het ook in de Mediabibliotheek doen: open een afbeelding en vul de alternatieve tekst in bij de bijlagedetails.
- Shopify. Voor productfoto’s: ga naar Producten, open een product, klik op een foto om het mediavoorbeeld te openen, kies de optie om alt-tekst toe te voegen, typ en sla op, zoals beschreven in de hulp van Shopify. Afbeeldingen in je thema hebben een eigen veld in de thema-editor, bij de instelling van de afbeelding.
- Wix. Klik in de editor op de afbeelding, klik op het pictogram Instellingen en vul het veld in waarin Wix vraagt wat er op de afbeelding staat (in het Engels "What’s in the image?"). Voor galerijen open je het beheer van de media en selecteer je elke afbeelding. Om een afbeelding als versiering te markeren, biedt Wix een vinkje in zijn Toegankelijkheidswizard. Zie de hulp van Wix over afbeeldingen.
- Squarespace. Bewerk het afbeeldingsblok en typ in het veld voor alt-tekst op het tabblad Inhoud. De hulppagina van Squarespace legt uit waar het veld zit bij galerijen en andere opmaak.
- AI-bouwers zoals Lovable, Bolt en v0. Daar is er geen formulierveld: je vraagt het in de chat. Een handige prompt: "Maak een lijst van elke afbeelding op deze pagina met de huidige alt-tekst. Stel voor elke afbeelding een betere beschrijving voor, op basis van wat ze toont en waarom ze er staat. Markeer decoratieve afbeeldingen voor een lege alt. Wacht op mijn akkoord voordat je iets wijzigt." Onze gids voor AI-bouwers bevat meer kant-en-klare prompts.
Verschillende van deze tools kunnen intussen met AI beschrijvingen voorstellen. Dat spaart tijd, maar zie elk voorstel als een klad: het hulpmiddel ziet pixels, niet jouw bedoeling.
Hoe ibin je helpt zwakke beschrijvingen te vinden
Een automatische controle vindt afbeeldingen zonder enige beschrijving, en links of knoppen die uit een afbeelding zonder naam bestaan. ibin toont ze elk met een uitvergrote afbeelding van de plek op de pagina en een herstelgids voor afbeeldingsbeschrijvingen.
Wat een automatische controle niet kan, is beoordelen of een beschrijving _klopt_. "Mok" doorstaat elke automatische test. Daarom biedt ibin een optionele tweede blik van AI. Die bekijkt de afbeeldingen en hun beschrijvingen en geeft een score van 1 tot 5 voor hoe goed ze passen, samen met linkteksten, toetsenbordgebruik en duidelijke taal. Zie die scores als aanwijzingen: ze tonen welke afbeeldingen een tweede blik waard zijn, en jij beslist. Automatische controles vinden ruwweg een derde tot de helft van alle toegankelijkheidsproblemen, dus de rest moet een mens nakijken.
Controleer je afbeeldingsbeschrijvingen
Controleer gratis een pagina met ibin om te zien welke afbeeldingen geen beschrijving hebben, en vraag daarna de tweede blik om beschrijvingen te vinden die beter kunnen. Begin met je startpagina en je best verkochte producten. Meld je je aan, dan kun je tot 200 pagina’s van dezelfde site laten controleren, en de herstelgidsen leggen elke oplossing stap voor stap uit.
Kijk hoe je eigen site scoort
Controleer gratis een pagina, zonder account. Je krijgt een duidelijke lijst van wat je eerst oplost, met afbeeldingen van waar elk probleem zit.
