Het gebruik van alt-teksten: hoe maak je afbeeldingen toegankelijk en SEO-vriendelijk?

Afbeeldingen spelen een cruciale rol op vrijwel iedere website. Ze maken content aantrekkelijker, verduidelijken informatie en trekken de aandacht van bezoekers. Toch worden afbeeldingen vaak niet optimaal ingezet. Een van de belangrijkste aspecten waar veel webbouwers nog steken laten vallen, is het gebruik van alt-teksten. Dit kleine stukje tekst kan een groot verschil maken voor zowel toegankelijkheid als zoekmachineoptimalisatie. In dit artikel leer je wat alt-teksten zijn, waarom ze zo belangrijk zijn, hoe je ze schrijft en welke best practices je moet volgen.

Wat is een alt-tekst?

Een alt-tekst (alternatieve tekst) is een attribuut binnen de <img>-tag dat beschrijft wat er op een afbeelding te zien is. Het attribuut heet alt, wat staat voor alternative.

Voorbeeld:

De alt-tekst wordt niet direct zichtbaar voor bezoekers, maar speelt een belangrijke rol voor schermlezers, zoekmachines en situaties waarin de afbeelding niet geladen kan worden.

Waarom zijn alt-teksten belangrijk?

1. Toegankelijkheid
   Voor gebruikers die blind of slechtziend zijn en een schermlezer gebruiken, is de alt-tekst onmisbaar. De schermlezer leest de beschrijving voor, zodat de gebruiker weet wat er op de afbeelding staat. Zonder alt-tekst wordt er vaak alleen “afbeelding” voorgelezen, wat totaal niet informatief is.

2. SEO en indexering
   Zoekmachines kunnen afbeeldingen niet bekijken zoals mensen dat doen. Ze vertrouwen op de alt-tekst om te begrijpen waar een afbeelding over gaat. Goed geschreven alt-teksten vergroten de kans dat afbeeldingen in de zoekresultaten van Google Afbeeldingen verschijnen en verbeteren indirect ook de SEO van je pagina.

3. Fallback bij trage verbindingen
   Als een afbeelding niet geladen wordt (bijvoorbeeld door een trage verbinding of foutief pad), wordt de alt-tekst getoond als vervanging. Hierdoor blijft de gebruiker toch begrijpen wat er op de plek van de afbeelding hoort te staan.

4. Verbeterde gebruikerservaring
   Alt-teksten maken een website professioneler en informatiever. Bezoekers ervaren dat er moeite is gedaan om de content voor iedereen bruikbaar te maken.

Hoe schrijf je goede alt-teksten?

Een alt-tekst moet functioneel en beschrijvend zijn, maar niet overdreven lang. Hier zijn enkele richtlijnen:

• Beschrijf wat je ziet: wees concreet en duidelijk.

• Houd het kort en bondig: meestal 5 tot 15 woorden is voldoende.

• Gebruik relevante zoekwoorden: maar alleen als ze logisch passen in de beschrijving.

• Voeg geen onnodige woorden toe zoals “afbeelding van” of “foto van”. Dat is overbodig, want het is al duidelijk dat het een afbeelding betreft.

• Pas de context aan: een alt-tekst moet aansluiten bij de inhoud van de pagina. Een afbeelding kan op de ene pagina een andere rol spelen dan op de andere.

Voorbeeld slecht:

Voorbeeld goed:

Wanneer gebruik je geen alt-tekst?

Niet elke afbeelding heeft een alt-tekst nodig. Decoratieve afbeeldingen die puur voor de vormgeving worden gebruikt, zoals achtergronddecoraties of scheidingslijnen, hebben geen betekenisvolle beschrijving nodig. In dat geval gebruik je een lege alt-tekst:

Met alt="" geef je expliciet aan dat de afbeelding geen betekenis heeft. Een schermlezer zal deze overslaan, wat de toegankelijkheid juist verbetert.

Alt-teksten en SEO

Alt-teksten zijn een belangrijk onderdeel van on-page SEO. Google adviseert zelf om duidelijke en beschrijvende alt-teksten te gebruiken, omdat dit helpt bij het begrijpen van de content. Hier zijn enkele SEO-tips:

• Gebruik zoekwoorden natuurlijk: stop er geen keyword stuffing in.

• Beschrijf de afbeelding in de context van de pagina.

• Combineer alt-tekst met bestandsnamen. Een afbeelding genaamd rode-sportwagen.jpg met alt-tekst “rode sportwagen langs de kustweg” werkt beter dan IMG123.jpg met een vage beschrijving.

• Gebruik ook captions indien relevant: een bijschrift onder de afbeelding kan de alt-tekst versterken.

Voorbeelden van goede alt-teksten

Productfoto in een webshop:

Infographic:

Blogafbeelding:

Alt-teksten en toegankelijkheid (WCAG)

Volgens de WCAG-richtlijnen (Web Content Accessibility Guidelines) moeten alle betekenisvolle afbeeldingen voorzien zijn van een beschrijving. Dit geldt ook voor iconen, knoppen en links die een afbeelding bevatten.

Voorbeeld: een zoekknop met een vergrootglas-icoon

Zonder alt-tekst zou een schermlezer hier alleen “afbeelding” voorlezen, wat niet duidelijk is. Met een goede alt-tekst weet de gebruiker dat dit de zoekknop is.

Veelgemaakte fouten met alt-teksten

1. Alt-tekst overslaan bij belangrijke afbeeldingen.

2. Alt-tekst overladen met zoekwoorden waardoor het onnatuurlijk wordt.

3. Decoratieve afbeeldingen voorzien van een nutteloze alt-tekst in plaats van een lege.

4. Te lange alt-teksten waardoor schermlezers onnodig veel tekst oplezen.

5. Verkeerde context gebruiken: een afbeelding kan verschillende betekenissen hebben afhankelijk van de pagina.

Tips voor optimaal gebruik van alt-teksten

• Zorg dat alle inhoudelijke afbeeldingen een betekenisvolle alt-tekst hebben.

• Gebruik lege alt-teksten voor decoratieve afbeeldingen.

• Houd alt-teksten kort, krachtig en relevant.

• Controleer je website met een schermlezer om te zien hoe de alt-teksten worden voorgelezen.

• Zorg dat de alt-tekst aansluit bij de bestandsnaam, de titel en de context van de pagina.

Alt-teksten zijn een van de eenvoudigste maar krachtigste manieren om je website toegankelijker en SEO-vriendelijker te maken. Ze vergroten de bruikbaarheid voor bezoekers, verbeteren de vindbaarheid in zoekmachines en zorgen dat je website voldoet aan de richtlijnen voor toegankelijkheid.