Alt-teksten voor afbeeldingen: complete gids voor WordPress en WCAG

Alt-teksten zijn korte tekstalternatieven die uitleggen wat een afbeelding betekent in de context van de pagina. Ze helpen vooral mensen die een screenreader gebruiken en zijn een belangrijk onderdeel van WCAG. Schrijf dus niet standaard wat er letterlijk op beeld staat, maar benoem de informatie, functie of boodschap die anders verloren gaat. Is een afbeelding puur decoratief? Gebruik dan een leeg alt-attribuut: alt="".

Voor een toegankelijke website hoort dit thuis in het vaste proces voor content, ontwerp en beheer. Bij strategisch en creatief webdesign is toegankelijkheid daarom geen losse eindcontrole, maar een ontwerp- en contentkeuze vanaf het begin.

Wat is een alt-tekst?

Een alt-tekst is de inhoud van het HTML-attribuut alt bij een afbeelding. Als een afbeelding niet beschikbaar is of door een screenreader wordt voorgelezen, biedt deze tekst een alternatief voor de relevante visuele informatie.

<img src="teamoverleg.jpg" alt="Drie adviseurs bespreken een planning aan een vergadertafel">

De beste alt-tekst hangt altijd af van de context. Dezelfde foto kan op een teampagina om een beschrijving vragen, maar op een pagina waar de tekst al uitgebreid over het team vertelt decoratief zijn.

Waarom zijn alt-teksten belangrijk voor WCAG?

WCAG 2.2 beschrijft onder succescriterium 1.1.1, Non-text Content, dat niet-tekstuele inhoud een tekstalternatief nodig heeft wanneer die inhoud informatie of een functie overbrengt. Een passend tekstalternatief zorgt dat bezoekers de boodschap of bediening niet missen als zij de afbeelding niet kunnen waarnemen.

Dat betekent niet dat elke afbeelding een uitgebreide omschrijving nodig heeft. De cruciale vraag is: verliest de bezoeker relevante informatie of functionaliteit zonder deze afbeelding? Zo ja, bied dan een bruikbaar tekstalternatief. Zo nee, dan is een lege alt-tekst vaak de juiste keuze.

Besliskaart: welke alt-tekst past bij jouw afbeelding?

Type afbeelding	Wat doe je?	Voorbeeld
Informatief	Beschrijf de informatie die relevant is voor de tekst eromheen.	alt="Adviseur toont de maandplanning aan een klant"
Decoratief	Gebruik een lege alt-tekst. Laat de afbeelding niet weg zonder alt-attribuut.	alt=""
Functioneel, bijvoorbeeld een link of knop	Beschrijf de actie of bestemming, niet het uiterlijk van het icoon.	alt="Plan een kennismaking"
Afbeelding met tekst	Neem de essentiële tekst op in het alternatief.	alt="Download de brochure: diensten voor zakelijke groei"
Complexe grafiek of infographic	Geef een korte samenvatting in de alt-tekst en plaats de volledige uitleg als gewone tekst bij de afbeelding.	alt="Grafiek met stijgende aanvragen per maand; volledige toelichting volgt onder de grafiek"
Logo	Noem de organisatienaam, tenzij die al als tekst direct naast het logo staat en het logo geen extra functie heeft.	alt="LYNX Media"

Een goede alt-tekst schrijven: stappenplan

1. Bepaal de functie. Vraag eerst of de afbeelding informatie toevoegt, een actie uitvoert of alleen sfeer creëert.
2. Lees de omliggende tekst. Herhaal geen informatie die al letterlijk direct voor of na de afbeelding staat.
3. Noteer de boodschap. Beschrijf wat de bezoeker moet begrijpen, niet elk zichtbaar detail.
4. Schrijf concreet en natuurlijk. Gebruik gewone taal. Begin meestal niet met ‘afbeelding van’ of ‘foto van’: een screenreader kondigt het element doorgaans al aan.
5. Controleer tekst in beeld. Staat essentiële tekst in de afbeelding, neem die dan op in de alt-tekst of, liever nog, zet die informatie als echte HTML-tekst op de pagina.
6. Test op herhaling en functie. Luister of lees de alt-tekst samen met de linktekst, kop en omringende alinea. Is de boodschap logisch en niet dubbel?

Voorbeelden voor zakelijke websites

Situatie	Minder goed	Beter
Foto op een dienstenpagina	alt="SEO bureau Amsterdam zoekmachine optimalisatie"	alt="Marketeer bespreekt zoekresultaten met een ondernemer"
Vergrootglas-icoon dat naar zoeken linkt	alt="Vergrootglas"	alt="Zoeken op de website"
Sfeervolle achtergrond bij een kop die de boodschap al bevat	alt="Moderne kantoorruimte met planten en laptop"	alt=""
Screenshot in een uitlegartikel	alt="Screenshot WordPress"	alt="WordPress-mediabibliotheek met het veld Alternatieve tekst geselecteerd"
LinkedIn-icoon als link naar een profiel	alt="LinkedIn icoon"	alt="Bekijk ons LinkedIn-profiel"

Wanneer gebruik je alt=""?

Een lege alt-tekst is correct voor afbeeldingen die geen inhoudelijke waarde toevoegen. Denk aan een abstracte vorm, een sfeerfoto zonder aanvullende boodschap of een decoratief pictogram naast tekst die dezelfde functie al duidelijk maakt.

Belangrijk: alt="" is iets anders dan het alt-attribuut weglaten. Met een leeg alt-attribuut geef je hulptechnologie expliciet mee dat de afbeelding genegeerd mag worden. Ontbreekt het attribuut, dan kan bestandsinformatie of een onbruikbare melding worden voorgelezen.

Grafieken, infographics en screenshots

Bij complexe afbeeldingen is een korte alt-tekst alleen zelden voldoende. Vat de hoofdboodschap samen in de alt-tekst en geef de data, conclusies of stappen vervolgens in zichtbare tekst bij de afbeelding. Zo is de informatie toegankelijk voor iedereen en blijft deze ook bruikbaar bij vergroten, vertalen en zoeken.

Voor een screenshot in een handleiding beschrijf je alleen de interface-elementen die nodig zijn voor de taak. Een volledige opsomming van ieder menu, pictogram en kleur maakt het alternatief juist minder bruikbaar.

Alt-tekst toevoegen in WordPress

1. Open de afbeelding in de WordPress-mediabibliotheek of selecteer de afbeelding in de editor.
2. Zoek het veld Alternatieve tekst.
3. Vul de alt-tekst in op basis van de functie van de afbeelding op die pagina.
4. Sla de wijziging of pagina op en bekijk de geplaatste afbeelding in de juiste context.
5. Controleer bij hergebruik van een afbeelding of de opgeslagen tekst nog past. Een afbeelding kan op een andere pagina een andere functie hebben.

Let bij afbeeldingen die als link of knop dienen extra goed op: de alternatieve tekst moet dan de bestemming of handeling duidelijk maken. Bij uitgelichte afbeeldingen en themaonderdelen is het bovendien verstandig te controleren hoe jouw WordPress-thema de afbeelding en alt-attributen uitvoert.

Alt-tekst, onderschrift, bestandsnaam en title-attribuut

• Alt-tekst: het tekstalternatief voor relevante inhoud of functionaliteit van een afbeelding.
• Onderschrift: zichtbare tekst bij een afbeelding, bedoeld voor alle bezoekers. Gebruik dit voor bronvermelding, context of toelichting.
• Bestandsnaam: een beheersmatig hulpmiddel, bijvoorbeeld adviseur-website-strategie.jpg. Dit vervangt geen alt-tekst.
• Title-attribuut: geen betrouwbaar alternatief voor een goede alt-tekst. Reken er niet op voor toegankelijkheid.

Alt-teksten en SEO: wat helpt wel?

Alt-tekst is in de eerste plaats bedoeld als toegankelijk tekstalternatief. Een relevant onderwerp of product mag natuurlijk voorkomen als het eerlijk beschrijft wat de afbeelding laat zien. Zoekwoorden toevoegen terwijl ze niets met de afbeelding te maken hebben, maakt de ervaring slechter en levert geen bruikbaar alternatief op.

Combineer alt-teksten daarom met de bredere technische en inhoudelijke aanpak voor beelden. Lees ook onze gids over afbeeldingen optimaliseren in WordPress voor onder meer formaat, compressie en laadsnelheid.

Veelgemaakte fouten

• Zoekwoorden herhalen in plaats van de afbeelding beschrijven.
• Iedere afbeelding een alt-tekst geven, ook als deze decoratief is.
• ‘Afbeelding van’ voor elke omschrijving zetten.
• Dezelfde alt-tekst gebruiken voor meerdere afbeeldingen met een andere functie.
• Alleen een bestandsnaam of een vage term als ‘banner’ of ‘grafiek’ invullen.
• Essentiële informatie uitsluitend in een infographic of screenshot plaatsen.
• Een icoon beschrijven in plaats van de actie die het uitvoert.

Praktische controlelijst voor bestaande afbeeldingen

Gebruik deze controle bij nieuwe content en neem bestaande kernpagina's periodiek mee in je websiteonderhoud.

• Heeft elke informatieve afbeelding een tekstalternatief dat de relevante boodschap overbrengt?
• Hebben decoratieve afbeeldingen een leeg alt-attribuut?
• Beschrijven gelinkte afbeeldingen de bestemming of actie?
• Is essentiële tekst uit afbeeldingen ook als gewone tekst beschikbaar?
• Zijn grafieken en infographics voorzien van een zichtbare toelichting?
• Zijn alt-teksten vrij van irrelevante zoekwoorden en onnodige herhaling?
• Past de alt-tekst bij de context waarin de afbeelding nu staat?
• Zijn afbeeldingslinks en mediabestanden technisch in orde? Pak kapotte verwijzingen ook aan met deze gids over 404- en soft-404-fouten.

Maak toegankelijkheid onderdeel van je websiteproces

Alt-teksten werken het best als contentmakers, marketeers en webbouwers dezelfde beslisregels gebruiken. Leg die regels vast in je contentworkflow en toets ze bij nieuwe pagina's, templates en ontwerpwijzigingen. Zo voorkom je dat toegankelijkheid afhankelijk wordt van een eenmalige opschoning.

Wil je toegankelijkheid, structuur en conversie samenbrengen in je website? Bekijk dan alle webdesign-, SEO- en online marketingdiensten van LYNX Media of bespreek je website of online groeikansen met LYNX Media.