Welke alt-tekst past bij welke afbeelding?
Volgens het W3C hangt een goede alt-tekst af van het doel van de afbeelding. De eis voor tekstalternatieven staat in WCAG-succescriterium 1.1.1 (niet-tekstuele content, niveau A). De beslisboom van het W3C komt neer op deze keuzes:
- Informatieve afbeelding: een foto of illustratie die iets toevoegt. Beschrijf kort wat belangrijk is.
- Functionele afbeelding: een afbeelding in een link of knop, zoals een printer-icoon. Beschrijf de functie, niet het plaatje.
- Afbeelding met tekst: neem dezelfde woorden op, tenzij die tekst al als gewone tekst in de buurt staat.
- Complexe afbeelding: bijvoorbeeld een grafiek. Zet de volledige informatie ook elders op de pagina.
- Decoratieve afbeelding: gebruik een leeg alt-attribuut,
alt="". Schermlezers slaan de afbeelding dan over.
Ook de context telt. Een foto van een vogel beschrijf je op een site over parken kort, op een site over vogels uitgebreider.
Wat zegt Google over alt-tekst?
Google noemt alt-tekst het belangrijkste attribuut om extra informatie over een afbeelding te geven. Google combineert die tekst met computer vision en de inhoud van de pagina. Staat een afbeelding in een link, dan werkt de alt-tekst als ankertekst.
Schrijf nuttige tekst die bij de pagina past, met zoekwoorden waar ze logisch zijn. Een rij zoekwoorden geeft volgens Google een slechte gebruikerservaring. Bovendien kan je site daardoor als spam overkomen.
Voorbeeld: alt-tekst in een webshop
Webshop Tafelkunst verkoopt servies. Voor de productfoto van een theepot volgt de shop de opbouw die Google zelf als voorbeeld geeft:
| Alt-tekst | Beoordeling |
|---|---|
| (geen alt-attribuut) | Slecht: schermlezers en Google missen de inhoud |
| theepot thee theepotten goedkope theepot kopen | Slecht: opgestapelde zoekwoorden |
| theepot | Beter, maar weinig informatie |
| Blauwe porseleinen theepot met handgeschilderde bloemen | Goed: beschrijft wat je ziet |
Het winkelwagenicoon in de header krijgt de alt-tekst ‘Winkelwagen’, want het is een knop. Een sierlijn tussen twee blokken krijgt alt="". Meer over afbeeldingen en vindbaarheid lees je bij technische SEO.
Verwar alt-tekst niet met
- Bijschrift: zichtbare tekst onder een afbeelding. Google haalt ook uit bijschriften informatie over de afbeelding, maar een bijschrift vervangt de alt-tekst niet.
- Bestandsnaam: is volgens Google maar een heel lichte aanwijzing over het onderwerp van de afbeelding. Een korte, beschrijvende naam is wel beter dan
IMG00023.JPG.
Veelgestelde vragen over Alt-tekst
Is alt tag hetzelfde als alt-tekst?
Ja. Alt tag is een veelgebruikte, maar technisch onjuiste naam. Alt is een attribuut van het img-element, geen aparte tag.
Mag ik het alt-attribuut weglaten bij een decoratieve afbeelding?
Nee, laat het attribuut staan maar maak het leeg: alt=””. Zonder alt-attribuut lezen sommige schermlezers de bestandsnaam voor. Dat is storend voor de gebruiker.
Helpt alt-tekst voor SEO?
Ja. Google gebruikt alt-tekst om te begrijpen wat een afbeelding toont. Het W3C noemt vindbaarheid in zoekmachines ook als voordeel. Schrijf voor mensen, niet voor zoekmachines.