Alternatieve tekst voor afbeelding

Hoe dit probleem op te lossen?

<img> elementen moeten alternatieve tekst hebben die gebruikt kan worden door bijvoorbeeld screenreaders. Voeg een alt attribuut toe om alternatieve tekst toe te voegen:

<img src="team.png" alt="De medewerkers van Bedrijf X staan voor het kantoor" />

Er zijn nog 2 andere technieken die alternatieve tekst aan een afbeelding toevoegen door gebruik te maken van aria-label of aria-labelledby. De meest gebruikelijke techniek is echter om het alt attribuut te gebruiken.

Hoe schrijf je een goede alt-tekst?

Het schrijven van een goede alt-tekst is een uitdaging. Een goede aanpak is om de afbeelding te beschrijven aan iemand die deze nog niet heeft gezien, of om je voor te stellen dat je de afbeelding uitlegt aan iemand die voor je staat.

Een alt tekst moet aan een aantal richtlijnen voldoen:

1. De tekst moet beschrijvend zijn
2. De tekst moet beknopt zijn
3. De alt tekst mag niet beginnen met ‘afbeelding’ of ‘foto’
4. Een alt tekst moet goed passen in de context van de pagina

Wat te doen met decoratieve afbeeldingen?

Soms dienen afbeeldingen op een pagina alleen als visuele verbeteringen en bieden ze geen extra informatie. In deze gevallen moet je assistieve technologieën, zoals schermlezers, informeren dat de afbeelding decoratief is. Dit kan worden gedaan door een leeg alt="" attribuut toe te voegen.

<img src="yellow-dots.png" alt="" />

Waarom is dit belangrijk?

Mensen die gebruik maken van ondersteunende technologieën zoals schermlezers kunnen een afbeelding niet zien. Daarom heeft de schermlezer tekst nodig die aan de gebruiker kan worden voorgelezen.

Een ander voordeel van het toevoegen van alt teksten is dat het robots en zoekmachines in staat stelt de inhoud van een afbeelding te interpreteren.