Het alt-attribuut biedt een tekstalternatief dat de inhoud of functie van een afbeelding beschrijft. Het dient gebruikers en tools die de afbeelding niet kunnen zien.
html
<img src="chart.png" alt="Sales grew 40% from Q1 to Q2" />
Het alt-attribuut biedt een tekstalternatief dat de inhoud of functie van een afbeelding beschrijft. Het dient gebruikers en tools die de afbeelding niet kunnen zien.
<img src="chart.png" alt="Sales grew 40% from Q1 to Q2" />
alt hardop voor, zodat een blinde gebruiker weet wat de afbeelding overbrengt. Zonder dit horen ze alleen de bestandsnaam of gewoon "afbeelding" — nutteloos.alt-tekst in plaats van een pictogram voor een verbroken afbeelding.alt om afbeeldingen te begrijpen en indexeren (afbeelding SEO).<!-- ✅ describe the MEANING, not "image of..." -->
<img src="dog.jpg" alt="A golden retriever catching a frisbee" />
<!-- ✅ for functional images, describe the ACTION -->
<a href="/home"><img src="logo.png" alt="Acme home" /></a>
<!-- ✅ DECORATIVE images get an EMPTY alt so screen readers skip them -->
<img src="divider.png" alt="" />
De alt="" (leeg, maar aanwezig) is belangrijk: het vertelt schermlezers "dit is decoratief, negeer het". Het weglaten van alt helemaal is anders — dan kan de lezer de bestandsnaam aankondigen.
alt is het één meest belangrijke toegankelijkheidskenmerk voor afbeeldingen en een juridische vereiste onder toegankelijkheidsnormen (WCAG).
Het maakt inhoud waarneembaar voor niet-ziende gebruikers, biedt een terugval wanneer afbeeldingen kapotgaan, en helpt SEO — beschrijf wat de afbeelding in context betekent, en gebruik alt="" voor zuiver decoratieve afbeeldingen.