Alternatieve tekst voor afbeelding
Laatste wijziging:
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:
- De tekst moet beschrijvend zijn
- De tekst moet beknopt zijn
- De
alt
tekst mag niet beginnen met ‘afbeelding’ of ‘foto’ - 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.
Gratis Website Accessibility Audit
De diensten van ExcellentWebCheck
Het doel van ExcellentWebCheck is om de online gebruikerservaring van alle bezoekers van websites te verbeteren. De tools van ExcellentWebCheck helpen bij het detecteren en verbeteren van usability-problemen op uw website.