HTMLhulp.nl logo
Alt-teksten in HTML: hoe je afbeeldingen beschrijft voor SEO en toegankelijkheid

Alt-teksten in HTML: hoe je afbeeldingen beschrijft voor SEO en toegankelijkheid

Alt-teksten in HTML: hoe je afbeeldingen beschrijft voor SEO en toegankelijkheid

Afbeeldingen maken websites aantrekkelijker, maar zoekmachines en schermlezers begrijpen ze niet automatisch. Om te zorgen dat je afbeeldingen bruikbaar én waardevol zijn, gebruik je alt-teksten. Een alt-tekst beschrijft de inhoud of functie van een afbeelding in HTML. Dit helpt niet alleen mensen met een visuele beperking, maar ook zoekmachines bij het begrijpen en indexeren van je site. In dit artikel leer je wat alt-teksten zijn, hoe je ze schrijft en hoe ze bijdragen aan zowel toegankelijkheid als SEO.

Wat is een alt-tekst?

De alt-tekst (alternative text) is een beschrijving van een afbeelding die je toevoegt met het attribuut alt in de <img>-tag.

Voorbeeld:

<img src="fiets.jpg" alt="Man die door een stadspark fietst">

Als de afbeelding niet geladen kan worden of als iemand een schermlezer gebruikt, wordt de alt-tekst voorgelezen of weergegeven.

Waarom zijn alt-teksten belangrijk?

  1. Toegankelijkheid
    Voor mensen die blind of slechtziend zijn, is de alt-tekst essentieel. Schermlezers gebruiken alt-teksten om te vertellen wat er op een afbeelding staat.

  2. SEO
    Google kan geen afbeeldingen “zien”. Door alt-teksten te gebruiken, begrijpt de zoekmachine beter waar je afbeelding over gaat. Dit helpt je ranking, ook in Google Afbeeldingen.

  3. Fallback
    Als een afbeelding niet laadt, verschijnt de alt-tekst in plaats daarvan. Dit zorgt dat de gebruiker alsnog begrijpt wat er bedoeld was.

  4. Wetgeving
    In veel landen is digitale toegankelijkheid verplicht. Goede alt-teksten maken deel uit van de WCAG-richtlijnen.

Hoe schrijf je een goede alt-tekst?

Een goede alt-tekst is:

  • Kort en bondig (meestal max. 125 tekens).

  • Beschrijvend: vertel wat er echt op de afbeelding staat.

  • Relevanter dan decoratief: focus op wat belangrijk is voor de context.

  • Uniek: gebruik geen standaardzinnen zoals “afbeelding van…” tenzij dat nodig is.

Voorbeelden:

✔ Goed:

<img src="hond-speelt.jpg" alt="Zwarte labrador pup die met een rode bal speelt">

✘ Slecht:

<img src="hond-speelt.jpg" alt="Hond">

Het tweede voorbeeld is te algemeen en voegt weinig toe.

Decoratieve afbeeldingen en alt=""

Niet elke afbeelding heeft een beschrijving nodig. Puur decoratieve afbeeldingen, zoals achtergrondpatronen of scheidingslijnen, krijgen een lege alt-tekst:

<img src="decoratief.jpg" alt="">

Een schermlezer slaat deze afbeelding dan over, wat de ervaring beter maakt.

Alt-teksten en knoppen/links

Als een afbeelding een link of knop is, moet de alt-tekst de functie beschrijven in plaats van de afbeelding zelf.

Voorbeeld:

<a href="/home">
<img src="logo.png" alt="Ga naar homepagina">
</a>

Niet: “Logo van bedrijf X”, maar: “Ga naar homepagina”.

Alt-teksten voor infographics

Bij infographics of complexe afbeeldingen is een korte alt-tekst vaak niet genoeg. Gebruik een korte alt-tekst en voeg daarnaast een langere beschrijving toe in de tekst of via aria-describedby.

<img src="grafiek.png" alt="Verkoopcijfers per kwartaal" aria-describedby="grafiek-uitleg">
<p id="grafiek-uitleg">In Q1 was de omzet 20.000 euro, in Q2 25.000, in Q3 30.000 en in Q4 28.000.</p>

Zo combineer je een korte alt-tekst met een volledige uitleg.

Alt-teksten en SEO

Alt-teksten helpen niet alleen bij toegankelijkheid, maar ook bij SEO. Google gebruikt alt-teksten om te bepalen welke afbeeldingen in de zoekresultaten verschijnen.

Best practices:

  • Verwerk relevante zoekwoorden, maar blijf natuurlijk schrijven.

  • Schrijf beschrijvend, niet keyword-stuffed.

  • Zorg dat de alt-tekst aansluit bij de context van de pagina.

Voorbeeld:

<img src="html-tutorial.png" alt="Voorbeeld van HTML-code voor een beginnerscursus">

Praktisch voorbeeld: fotogalerij met alt-teksten

<section class="portfolio">
<h2>Onze projecten</h2>
<div class="grid">
<img src="website1.jpg" alt="Minimalistisch webdesign met lichte kleuren">
<img src="website2.jpg" alt="Portfolio website met grid-layout en donkere achtergrond">
<img src="website3.jpg" alt="E-commerce homepage met productoverzicht en winkelwagen">
</div>
</section>

Elke afbeelding heeft een unieke en relevante alt-tekst.

Wanneer gebruik je géén alt-tekst?

  • Decoratieve afbeeldingen → gebruik alt="".

  • Achtergrondafbeeldingen via CSS → hebben geen alt-tekst nodig.

  • Dubbele informatie → als de tekst al naast de afbeelding staat en exact hetzelfde vertelt, is een alt-tekst niet nodig.

Tools en checkers

Wil je weten of je alt-teksten correct zijn ingesteld? Gebruik:

  • Wave Accessibility Tool

  • axe DevTools

  • Google Lighthouse

Deze tools geven aan welke afbeeldingen alt-teksten missen of verbeterd kunnen worden.

Veelgemaakte fouten bij alt-teksten

  1. Geen alt-tekst toevoegen aan belangrijke afbeeldingen.

  2. Overbodige zinnen gebruiken, zoals “Afbeelding van…”.

  3. Alt-teksten volstoppen met zoekwoorden.

  4. Decoratieve afbeeldingen een alt-tekst geven die verwarrend is.

  5. Eén alt-tekst gebruiken voor meerdere verschillende afbeeldingen.

Tips voor betere alt-teksten

  • Schrijf alt-teksten alsof je iemand telefonisch uitlegt wat er op de afbeelding staat.

  • Zorg dat de alt-tekst past in de context van de pagina.

  • Combineer alt-teksten met beschrijvende bestandsnamen voor SEO.

  • Test je site met een schermlezer om te ervaren hoe de alt-teksten klinken.

  • Voeg geen overbodige woorden toe: hou het kort, maar informatief.

Alt-teksten lijken een klein detail, maar ze hebben grote impact op zowel toegankelijkheid als vindbaarheid. Met de juiste aanpak maak je je website gebruiksvriendelijker, inclusiever én beter vindbaar in zoekmachines.