Zorg dat afbeeldingen in de code een tekstalternatief kunnen krijgen

Alle afbeeldingen moeten een tekstalternatief hebben. Een tekstalternatief kan op verschillende manieren worden toegevoegd:

Tekstalternatief voor een <​img>-element

Bij een <​img>-element wordt een tekstalternatief gegeven met behulp van het alt-attribuut.

In de code ziet dat er zo uit:

Tekstalternatief voor een <​svg>-element

Bij een <​svg>-element wordt een tekstalternatief gegeven met behulp van het title-element in de svg. Gebruik ook aria-attribuut role="img" om ervoor te zorgen dat zo veel mogelijk ondersteunende technologieën het <​svg>-element herkennen als een afbeelding.

In de code ziet dat er zo uit:

Tekstalternatief voor afbeeldingen die is geplaatst met CSS

Aan een afbeelding die geplaatst is met CSS kan een tekstalternatief worden gegeven met een aria-label.

In de code ziet dat er zo uit:

Invulling van het Tekstalternatief

De invulling van een tekstalternatief wordt bepaald door de functie die een afbeelding heeft. In veel gevallen draagt een afbeelding informatie over. Beschrijf dan in het tekstalternatief wat er op de afbeelding te zien is. Bij een afbeelding die ook een link is, gaat het juist om het beschrijven waar de link naar toe verwijst. Als een afbeelding geen informatie aan de pagina toevoegt, dan is het beter om het helemaal geen tekstalternatief te geven zodat het kan worden genegeerd door hulptechnologieën.