Geef een alternatieve tekst aan afbeeldingen die als knop of ander formulier-element in een formulier worden gebruikt. In sommige formulieren worden afbeeldingen gebruikt als knop of ander formulier-element. Zo zou een afbeelding van een groene pijl als verzendknop kunnen worden gebruikt. En in een keuzelijst met mogelijke kleuren zouden afbeeldingen van de kleuren getoond kunnen worden in plaats van een tekstuele beschrijving.

Hoe pas je dit toe?

Zorg dat afbeeldingen in een formulier voorzien zijn van een alt-tekst die past bij het doel van de afbeelding. iemand die alleen de alt-teksten kan lezen moet het formulier ook kunnen invullen. Dat betekent dat de alt-tekst soms niet een letterlijke beschrijving van wat er te zien is moet bevatten, maar een beschrijving van de bedoeling van de afbeelding. De groene pijl die als verzendknop wordt gebruikt kan daarom beter de alt-tekst ‘verzenden’ krijgen dan ‘groene pijl naar rechts’.

Voorbeelden

Afbeeldingen als keuzemogelijkheid

Als je in een formulier kunt kiezen tussen verschillende afbeeldingen die elk voor een andere optie staan, dan moeten deze afbeeldingen een alt-tekst krijgen die beschrijft wat er op de afbeelding te zien is. In het volgende voorbeeld kun je kiezen tussen 2 kleuren van een fles: groen en rood. In de alt-teksten staat ‘Groen glas’ en ‘Rood glas’.

<label for="optie1">
<input type="radio" id="optie1">
<img src="fles-groen.jpg" alt="Groen glas" />
</label>
<label for="optie2">
<input type="radio" id="optie2">
<img src="fles-rood.jpg" alt="Rood glas" />
</label>

Afbeelding gebruikt als knop

Als een afbeelding als knop wordt gebruikt, bijvoorbeeld als verzendknop, dan moet de alternatieve tekst het doel van de knop beschrijven en niet per se wat op de afbeelding te zien is. Zo is ‘Verzenden’ een betere alt-tekst dan ‘groene pijl naar rechts’.

<input type="image" src="knop.jpg" alt="verzenden" />
 

Hoe draagt dit bij aan een betere website?

Bezoekers met een visuele beperking kunnen de afbeelding niet zien. Door een beschrijving van de afbeelding te geven is de informatie uit de afbeelding voor hen toch beschikbaar. Zij kunnen zo net als ieder ander het formulier invullen en verzenden.

Voor ontwikkelaars

De bouwer moet zorgen dat afbeeldingen die gebruikt worden als knop of ander formulier-element een goede alt-tekst krijgen, omdat de redacteur dit over het algemeen niet in het content management systeem (CMS) kan wijzigen.