Alt-teksten voor afbeeldingen: toegankelijkheid meets AI

Wat zijn alt-teksten en waarom zijn ze cruciaal?

Het alt-attribuut, vaak "alt-tekst" genoemd, is een stukje tekst dat je toevoegt aan een afbeelding in HTML. Oorspronkelijk is het bedoeld als alternatieve tekst die wordt getoond wanneer een afbeelding niet kan worden geladen, of die wordt voorgelezen door screenreaders voor blinde en slechtziende gebruikers. Maar de functie van alt-teksten reikt veel verder dan alleen toegankelijkheid.

AI-modellen die webcontent analyseren, kunnen afbeeldingen niet op dezelfde manier "zien" als mensen. Ze zijn afhankelijk van de alt-tekst om te begrijpen wat een afbeelding voorstelt en hoe deze zich verhoudt tot de omliggende content. Een pagina met informatieve alt-teksten geeft AI-modellen een veel completer beeld van de inhoud dan een pagina waar afbeeldingen zonder beschrijving staan. Dit principe sluit aan bij de bredere leesbaarheidsoptimalisaties die je content AI-vriendelijker maken.

Goede versus slechte alt-teksten

Het verschil tussen een goede en een slechte alt-tekst is vaak het verschil tussen een beschrijving die context geeft en een beschrijving die niets toevoegt. Laten we dit illustreren met concrete voorbeelden.

<!-- SLECHT: te vaag, geen context -->
<img src="team.jpg" alt="foto" />
<img src="grafiek.png" alt="grafiek" />
<img src="product.jpg" alt="afbeelding van product" />

<!-- SLECHT: keyword stuffing -->
<img src="team.jpg" alt="AEO SEO team Amsterdam marketing bureau SEO specialist" />

<!-- SLECHT: te lang, een heel verhaal -->
<img src="team.jpg" alt="Dit is een foto van ons geweldige team van 12 mensen
die allemaal heel hard werken aan SEO en AEO projecten voor onze klanten
in Amsterdam en de rest van Nederland en soms ook daarbuiten" />

<!-- GOED: beschrijvend en beknopt -->
<img src="team.jpg" alt="Het AEO Expert team tijdens een strategiesessie op kantoor in Amsterdam" />

<!-- GOED: beschrijft wat de grafiek toont -->
<img src="grafiek.png" alt="Staafgrafiek die toont dat AI-citaties met 340% zijn gestegen in 2025 vergeleken met 2024" />

<!-- GOED: product met relevante details -->
<img src="product.jpg" alt="Blauw draadloos toetsenbord met verlichte toetsen, schuin vooraanzicht" />

Richtlijnen voor effectieve alt-teksten

• Beschrijf de inhoud en functie van de afbeelding, niet het uiterlijk. "Grafiek die de stijging van AI-gebruik toont" is beter dan "rode en blauwe grafiek".
• Houd de alt-tekst beknopt, idealiter tussen de 5 en 15 woorden. Screenreaders lezen de volledige tekst op, dus bondigheid is belangrijk.
• Vermijd "afbeelding van" of "foto van" aan het begin. Screenreaders melden al dat het een afbeelding betreft.
• Gebruik relevante zoekwoorden waar dat natuurlijk past, maar vermijd keyword stuffing. De alt-tekst moet primair de afbeelding beschrijven.
• Voor decoratieve afbeeldingen (lijnen, achtergrondpatronen) gebruik je een leeg alt-attribuut: alt="". Dit vertelt screenreaders de afbeelding over te slaan.

Alt-teksten voor verschillende typen afbeeldingen

Niet elke afbeelding vraagt om dezelfde aanpak. Het type afbeelding bepaalt hoe je de alt-tekst het beste kunt formuleren.

Informatieve afbeeldingen

Dit zijn afbeeldingen die feitelijke informatie overbrengen, zoals foto's, illustraties en diagrammen. De alt-tekst moet de essentie van de informatie overbrengen die de afbeelding communiceert.

<!-- Informatieve foto -->
<img src="schema-org-voorbeeld.png"
     alt="Screenshot van JSON-LD schema markup in de broncode van een artikel, met Article type en author property gemarkeerd" />

<!-- Diagram -->
<img src="scan-flow.svg"
     alt="Stroomdiagram van het scanproces: URL invoer, HTML ophalen, 15 detectors uitvoeren, score berekenen, rapport genereren" />

Functionele afbeeldingen

Afbeeldingen die als link of knop fungeren, moeten een alt-tekst hebben die de actie beschrijft, niet de afbeelding zelf.

<!-- Logo als link naar homepage -->
<a href="/">
  <img src="logo.svg" alt="AEO Expert - terug naar homepage" />
</a>

<!-- Social media icoon als link -->
<a href="https://linkedin.com/company/kobalt-digital">
  <img src="linkedin-icon.svg" alt="Volg Kobalt op LinkedIn" />
</a>

<!-- Zoekknop -->
<button type="submit">
  <img src="search-icon.svg" alt="Zoeken" />
</button>

Complexe afbeeldingen: grafieken en infographics

Grafieken, infographics en andere complexe visuele elementen bevatten vaak meer informatie dan in een korte alt-tekst past. In deze gevallen kun je een beknopte alt-tekst combineren met een uitgebreidere beschrijving elders op de pagina.

<!-- Complexe grafiek met uitgebreide beschrijving -->
<figure>
  <img src="ai-adoptie-grafiek.png"
       alt="Lijngrafiek: AI-adoptie door bedrijven steeg van 20% in 2023 naar 72% in 2026"
       aria-describedby="grafiek-beschrijving" />
  <figcaption id="grafiek-beschrijving">
    De grafiek toont de adoptie van AI-tools door Nederlandse bedrijven over vier jaar.
    In 2023 gebruikte 20% AI-tools actief, in 2024 was dat 38%, in 2025 steeg het naar 55%,
    en in 2026 bereikte het 72%. De sterkste groei was tussen 2024 en 2025.
  </figcaption>
</figure>

Alt-teksten en AI-modellen

De relatie tussen alt-teksten en AI gaat twee kanten op. Enerzijds gebruiken AI-modellen alt-teksten om de visuele content van een pagina te begrijpen. Anderzijds kunnen AI-tools helpen bij het genereren van alt-teksten. Maar voor de AEO — bibliotheekterm-waarde is het eerste het belangrijkst.

• AI-crawlers indexeren alt-teksten als onderdeel van de pagina-content. Een afbeelding zonder alt-tekst is voor AI effectief onzichtbaar.
• Taalmodellen gebruiken alt-teksten om de context en het onderwerp van een pagina beter te begrijpen.
• Goede alt-teksten versterken de thematische relevantie van je pagina. Als je schrijft over Schema.org — bibliotheekterm en je afbeeldingen hebben alt-teksten met "schema markup voorbeeld", bevestigt dit het onderwerp.
• AI-modellen die multimodaal zijn (tekst en beeld verwerken) vergelijken de alt-tekst met wat ze in de afbeelding zien. Inconsistentie kan het vertrouwen verminderen.

Alt-teksten en heading-structuur: versterking

De waarde van alt-teksten wordt versterkt door een goede heading-hierarchie. Wanneer een afbeelding direct onder een H2 heading staat met het onderwerp "Schema.org implementatie" en de alt-tekst beschrijft "Screenshot van JSON-LD code in een Article schema", dan versterken heading en alt-tekst elkaar thematisch. AI-modellen interpreteren deze context-combinatie om de relevantie van je pagina te bepalen.

Alt-teksten en Open Graph afbeeldingen

Vergeet niet dat ook je Open Graph afbeeldingen een alt-tekst nodig hebben via de og:image:alt tag. Deze alt-tekst wordt weergegeven wanneer de OG-afbeelding niet kan worden geladen in social media previews en wordt door AI-modellen gebruikt als extra contextsignaal.

<!-- Open Graph afbeelding met alt-tekst -->
<meta property="og:image" content="https://aeo-expert.nl/images/og-alt-teksten.jpg" />
<meta property="og:image:alt" content="Vergelijking van goede en slechte alt-teksten met codevoorbeelden" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Alt-teksten auditen en verbeteren

De meeste websites hebben tientallen tot honderden afbeeldingen. Het handmatig controleren van elke alt-tekst is tijdrovend maar waardevol. Hier is een systematische aanpak.

1. Gebruik de browser DevTools (F12) en zoek naar img-elementen zonder alt-attribuut of met een leeg alt-attribuut op niet-decoratieve afbeeldingen.
2. Installeer een toegankelijkheidstool zoals axe DevTools of WAVE die automatisch ontbrekende alt-teksten detecteert.
3. Prioriteer afbeeldingen op je belangrijkste pagina's: homepage, productpagina's, blogposts en landingspagina's.
4. Controleer of bestaande alt-teksten daadwerkelijk beschrijvend zijn en niet slechts "afbeelding" of de bestandsnaam bevatten.
5. Voeg alt-teksten toe aan alle nieuwe content als onderdeel van je publicatieproces. Maak het een verplichting, geen optie.

Alt-teksten in een CMS-workflow

De grootste uitdaging bij alt-teksten is niet het schrijven ervan, maar het consequent toepassen in je dagelijkse workflow. In een CMS zoals WordPress of Laravel met Filament kun je dit afdwingen door het alt-veld verplicht te maken bij het uploaden van afbeeldingen. Train je contentteam om bij elke upload direct een beschrijvende alt-tekst in te voeren. Dit kost slechts enkele seconden per afbeelding maar levert grote voordelen op voor zowel toegankelijkheid als AI-zichtbaarheid. Alt-teksten zijn een van de vele factoren die bijdragen aan je algehele AEO-score, en het systematisch toepassen ervan is een teken van professioneel contentbeheer.

Samenvatting: de belangrijkste punten

• Alt-teksten zijn geen optionele toevoeging: ze zijn wettelijk verplicht voor niet-decoratieve afbeeldingen onder WCAG 2.2.
• AI-modellen gebruiken alt-teksten als primair signaal om de visuele content van een pagina te begrijpen.
• Goede alt-teksten zijn beschrijvend, beknopt (5 tot 15 woorden) en vermijden keyword stuffing.
• Complexe afbeeldingen zoals grafieken verdienen een korte alt-tekst plus een uitgebreide figcaption.
• Maak alt-teksten verplicht in je CMS-workflow om consistente kwaliteit te waarborgen.

Veelgestelde vragen

Elke afbeelding zonder alt-tekst is een gemiste kans om AI-modellen te vertellen wat je pagina bevat. Het is alsof je een boek publiceert waarin alle illustraties onbeschreven blijven.