Goede alt-tekst voor afbeeldingen schrijven (toegankelijkheid en SEO)

Alt-tekst is de korte beschrijving van een afbeelding die in het alt-attribuut van het img-element staat, en het is de toegankelijkheidsverbetering met de meeste impact die de meeste websites kunnen doorvoeren. Schermlezers lezen hem voor aan blinde en slechtziende bezoekers, browsers tonen hem als een afbeelding niet laadt, en zoekmachines leunen erop om te begrijpen wat een afbeelding laat zien. Het is bovendien een juridische kwestie: WCAG-succescriterium 1.1.1 vereist een tekstalternatief voor alle niet-tekstuele content op conformiteitsniveau A, het minimumniveau, en wetten als de European Accessibility Act bouwen precies op die criteria voort. Het goede nieuws is dat goede alt-tekst schrijven een vaardigheid van minuten is, niet van weken. De regels passen op een kaartje: beschrijf wat er in deze context aan de afbeelding toe doet, houd het bij ongeveer één bondige zin, laat zinsneden als afbeelding van weg, geef puur decoratieve afbeeldingen een leeg alt-attribuut, en laat het attribuut nooit helemaal weg. Deze gids loopt elke regel met voorbeelden langs, laat zien waar alt-tekst in WordPress woont en eindigt met hoe je elke afbeelding op je site vindt die er nog geen heeft.

Wat is alt-tekst en wie is ervan afhankelijk?

In de HTML-broncode is alt-tekst een attribuut op het afbeeldingselement:

<img src="lighthouse.jpg" alt="Rood-wit gestreepte vuurtoren op een rotskust bij zonsondergang">

Drie doelgroepen nemen hem tot zich, en over hen nadenken verklaart bijna elke regel die volgt. Schermlezergebruikers horen de alt-tekst in plaats van de afbeelding, dus voor hen ís die tekst simpelweg de afbeelding. Ongeveer 2,2 miljard mensen wereldwijd leven met een vorm van visuele beperking volgens de WHO, en een aanzienlijk deel daarvan surft met een schermlezer. Browsers tonen de tekst wanneer de afbeelding niet kan laden, wat nog dagelijks gebeurt bij trage verbindingen en mislukte deployments. En crawlers van zoekmachines, die afbeeldingen niet zien zoals mensen dat doen, gebruiken het alt-attribuut als hun belangrijkste tekstuele signaal voor de inhoud van een afbeelding.

De formele eis komt uit WCAG-succescriterium 1.1.1 Non-text Content. Dat staat op conformiteitsniveau A, wat betekent dat een site zonder tekstalternatieven zakt voor de laagste lat van toegankelijkheid, hoe goed al het andere ook is gedaan.

Goede alt-tekst schrijven: vijf regels die bijna alles dekken

Alt-tekst is schrijfwerk, en zoals alle schrijfwerk wordt het beter van een paar beperkingen. Deze vijf brengen je door vrijwel elke afbeelding heen:

• Beschrijf inhoud en doel, geen pixels. Vraag je af wat de afbeelding in deze context communiceert en zeg dat. Dezelfde foto van iemand achter een laptop kan op een supportpagina Supportmedewerker beantwoordt klantchats zijn en in een artikel over thuiswerken Werken aan de keukentafel.
• Wees specifiek, maar stop bij relevant. Hond zegt minder dan Puppy van een golden retriever rent achter een bal aan over het gazon. Maar gaat het artikel over gazononderhoud, dan doet het ras er misschien minder toe dan het kapotgetrapte gras.
• Houd het bij ongeveer één zin. Een veelgebruikte richtlijn is rond de 125 tekens, een conventie uit de tijd dat oudere schermlezers langere tekst in stukken knipten. Het is geen harde grens, maar wel een prettige dwang tot bondigheid. Zet de belangrijke woorden vooraan.
• Laat afbeelding van en foto van weg. Schermlezers kondigen het element al als afbeelding aan, dus die zinsneden zijn pure herhaling. Het type noemen voegt alleen waarde toe als het ertoe doet: schilderij van, schermafbeelding van en grafiek van geven de luisteraar houvast.
• Beschrijf bij gelinkte of functionele afbeeldingen de bestemming of de actie. Een logo dat naar de homepage linkt hoort Bedrijfsnaam, homepage te zeggen, niet het ontwerp van het logo te beschrijven. Een icoonknop die een zoekopdracht verstuurt hoort Zoeken te zeggen. Functie wint van uiterlijk zodra een afbeelding iets dóet.

Eén bijzonder geval verdient zijn eigen zin: afbeeldingen die tekst bevatten. WCAG raadt af om tekst überhaupt in afbeeldingen te bakken, maar waar dat toch gebeurt, bijvoorbeeld in een promotiebanner, moet de alt-tekst die tekst bevatten, want anders is die onzichtbaar voor iedereen die op het alternatief is aangewezen.

Goede en slechte alt-tekst: voorbeelden vergeleken

Zie het patroon in de zwakke kolom: bestandsnamen, losse woorden en beschrijvingen van pixels in plaats van betekenis. De rij met de grafiek toont het grootste gat. Voor een schermlezergebruiker zegt chart helemaal niets, terwijl een samenvatting van de bevinding in één regel het hele beeld vervangt. Is een grafiek te complex voor één regel, vat dan de kernboodschap samen in de alt-tekst en zet de volledige data ernaast in een tabel.

Decoratieve afbeeldingen: wanneer lege alt-tekst juist klopt

Niet elke afbeelding draagt betekenis. Sierlijke scheidingslijnen, abstracte achtergrondvormen en stockfoto's die alleen sfeer toevoegen zijn decoratie, en de juiste markup daarvoor is een leeg alt-attribuut:

<img src="divider-ornament.svg" alt="">

Het lege attribuut is een bewust signaal dat schermlezers vertelt de afbeelding volledig over te slaan, wat precies is wat een ziende bezoeker feitelijk ook doet. Dat is heel iets anders dan het attribuut weglaten: zonder alt-attribuut vallen veel schermlezers terug op het voorlezen van de bestandsnaam, en dan krijgt de bezoeker midden in een zin graphic streepje divider streepje ornament streepje final streepje v2 punt svg te horen. Daarom markeren toegankelijkheidscontroles ontbrekende alt-attributen als fout en lege als geldig. Het W3C biedt een handige beslisboom voor alt-tekst voor de eerlijke grensgevallen.

Een pragmatische test voor is dit decoratief: stel je voor dat de afbeelding weg is. Verliest de pagina geen informatie en geen functie, dan is lege alt-tekst juist. Verdwijnt er iets betekenisvols, beschrijf het dan.

Alt-tekst toevoegen in WordPress

WordPress geeft elke afbeelding een veld voor alt-tekst, en je bent er in drie klikken:

• In de blokeditor: selecteer het afbeeldingsblok, en het veld Alternatieve tekst verschijnt in de zijbalk met blokinstellingen onder Instellingen. Dit is de waarde die in de HTML van de pagina belandt.
• In de mediabibliotheek: open een afbeelding en vul het veld Alternatieve tekst in bij de bijlagegegevens. Deze waarde wordt als standaard gebruikt wanneer de afbeelding in de toekomst ergens wordt ingevoegd.
• Voor uitgelichte afbeeldingen: de alt-tekst komt uit de waarde in de mediabibliotheek van die afbeelding, dus uitgelichte afbeeldingen erven wat daar is opgeslagen.

Eén eigenaardigheid van WordPress veroorzaakt veel verwarring en verdient een duidelijke waarschuwing: de alt-tekst bijwerken in de mediabibliotheek verandert niets aan afbeeldingen die al in berichten staan. De blokeditor kopieert de alt-tekst op het moment van invoegen naar de berichtinhoud, en vanaf dat moment leeft die kopie zijn eigen leven. Corrigeer je alt-teksten in de mediabibliotheek en vraag je je af waarom de pagina's niet veranderen, dan is dat de reden. Bestaande plaatsingen moet je in de berichten zelf aanpassen, of met een search-replace-tool als de schaal daarom vraagt.

Nu je toch in de mediaworkflow zit: het veld voor alt-tekst is niet het titelveld en niet het onderschrift. De titel is grotendeels intern, het onderschrift is zichtbare tekst onder de afbeelding, en alleen het alt-attribuut bedient schermlezers en crawlers. Het verkeerde veld invullen is de meest voorkomende manier waarop sites eindigen met mooie onderschriften en lege alt-attributen.

Alt-tekst en SEO: wat Google er zelf over zegt

De documentatie van Google over afbeeldings-SEO is ondubbelzinnig: beschrijvende alt-tekst is een rankingfactor voor Google Images en helpt Google om zowel de afbeelding als de pagina eromheen te begrijpen. Voor webshops en contentsites is afbeeldingszoeken een echt verkeerskanaal, en het alt-attribuut is de meest directe knop die je eraan hebt. Dezelfde documentatie bevat de even ondubbelzinnige waarschuwing: alt-attributen volstoppen met zoekwoorden levert een slechte gebruikerservaring op en kan ertoe leiden dat je site als spam wordt gezien.

De praktische vertaling: schrijf de alt-tekst eerst voor de luisteraar, en hoort het onderwerp van de pagina er natuurlijk in thuis, noem het dan één keer. Blauwe Nike Air Zoom hardloopschoen, zijaanzicht is goede alt-tekst die toevallig de woorden bevat waar een koper op zoekt. hardloopschoenen kopen goedkope hardloopschoenen beste hardloopschoenen 2026 is spam in een alt-attribuut. Beschrijvende bestandsnamen (hardloopschoen-blauw.jpg in plaats van IMG_4032.jpg) en omringende tekst die bij de afbeelding past maken het plaatje compleet, maar alt-tekst blijft het sterkste signaal dat je volledig zelf in de hand hebt.

Afbeeldingen zonder alt-tekst op je site opsporen

Goede alt-tekst schrijven begint bij weten waar hij ontbreekt, en er is gereedschap voor elke schaal. Voor één pagina kan de browser het meteen beantwoorden: open de console van de ontwikkelaarstools en draai een oneliner die elke overtreder opsomt.

// Toont alle afbeeldingen zonder alt-attribuut op de huidige pagina
document.querySelectorAll('img:not([alt])').forEach((img) => console.log(img.src));

Voor pagina-voor-paginacontrole met visuele feedback markeert de gratis WAVE-tool van WebAIM elk ontbrekend en verdacht alt-attribuut rechtstreeks op de gerenderde pagina, en Lighthouse in Chrome neemt de controle op in zijn toegankelijkheidsaudit. De omvang van het probleem is goed gedocumenteerd: de jaarlijkse WebAIM Million-analyse van de homepages van het miljoen grootste sites vindt ontbrekende alt-tekst jaar na jaar bij de meest voorkomende toegankelijkheidsfouten, op ruwweg de helft van alle geteste homepages. Wat je op je eigen site ook aantreft, je verkeert in groot gezelschap, en anders dan de meeste toegankelijkheidsproblemen los je dit er afbeelding voor afbeelding op, in minuten.

Hoe controleert InspectWP je alt-teksten?

Een InspectWP-rapport telt de afbeeldingen op een geanalyseerde pagina en meldt in het SEO-onderdeel hoeveel er een alt-attribuut dragen en hoeveel er een missen, waarbij de missers als waarschuwing worden gemarkeerd. Zo krijg je de inventaris van ontbrekende alt-teksten voor een WordPress-site zonder de ontwikkelaarstools te openen, en omdat rapporten volgens een schema kunnen draaien, vangt het ook de terugval op die onvermijdelijk optreedt wanneer er in haast nieuwe content wordt gepubliceerd. Combineer de telling uit het rapport met de schrijfregels uit deze gids en de route is kort: zoek de afbeeldingen, beschrijf wat ertoe doet, laat decoratie stilzwijgend leeg, en zowel je schermlezergebruikers als je verkeer uit afbeeldingszoeken plukken er de vruchten van.