Associez un équivalent textuel aux images utilisées en tant que bouton ou autre élément dans un formulaire. Certains formulaires se servent en effet d’images pour en faire des boutons ou d’autres éléments de formulaire. Une image d’une flèche verte peut par exemple faire office de bouton d’envoi. Ou encore, une liste de couleurs disponibles se présente parfois comme un liste d'images de couleurs au lieu d'une énumération de couleurs.

Comment vous y prendre ?

Assurez-vous que les images présentes dans un formulaire possèdent toutes un texte alt qui correspond à leur but. Les personnes qui ne savent lire que les textes alt doivent elles aussi pouvoir compléter le formulaire. Ce qui signifie que le texte alt ne doit parfois pas être une description littérale de ce que l’on voit, mais doit décrire l’objectif de l’image. Dans l’exemple de la flèche verte servant de bouton d’envoi, il vaut donc mieux lui associer le texte alt ‘envoyer’ que le texte alt ‘flèche verte vers la droite’.

Exemples

Quand les images sont des options

Lorsque, dans un formulaire, l'on peut choisir entre différentes images qui représentent chacune une option, ces images doivent avoir un texte alt qui décrit ce qu’elles montrent. Dans l’exemple suivant, l'on peut choisir entre deux couleurs d’une bouteille : vert ou rouge. Dans les textes alt, on peut lire ‘verre vert’ et ‘verre rouge’.

<label for="option1">
<input type="radio" id="option1">
<img src="bouteille-verte.jpg" alt="Verre vert" />
</label>
<label for="option2">
<input type="radio" id="option2">
<img src="bouteille-rouge.jpg" alt="Verre rouge" />
</label>

Quand l’image sert de bouton

Lorsqu’une image est utilisée en tant que bouton (un bouton d’envoi, par exemple), l’équivalent textuel doit alors décrire le but du bouton et pas nécessairement ce que l’on voit sur l’image. Il vaut donc mieux opter pour ‘envoyer’ que pour ‘flèche verte vers la droite’ comme texte alt.

<input type="image" src="bouton.jpg" alt="envoyer" />

 

Comment cela contribue-t-il à un meilleur site web ?

Les visiteurs avec un handicap visuel ne peuvent pas voir l’image. Or, une description de l’image leur permet justement d’avoir accès à cette information. Ils peuvent alors compléter le formulaire et l’envoyer comme n’importe qui d’autre.

Pour les développeurs

Le développeur doit veiller à ce que les images qui font office de boutons ou d’autres éléments de formulaire aient un texte alt adéquat car souvent, le rédacteur ne peut de son côté pas le modifier dans le système de gestion de contenu (CMS).