Texte alternatif du bouton d’image
Silktide repère les boutons d’image dans vos formulaires qui n’ont pas de . Un bouton d’image sans texte alternatif ne permet pas aux personnes qui ne peuvent pas le voir de savoir ce que fera le fait d’appuyer dessus.
<!-- Problème : aucun attribut alt -->
<input type="image" src="button.png">
<!-- Problème : alt vide -->
<input type="image" src="button.png" alt="">
<!-- Correctif : le texte alternatif nomme l’action -->
<input type="image" src="button.png" alt="Envoyer le message">
Pourquoi c’est important
Un bouton d’image (<input type="image">) utilise une image à la place d’une étiquette textuelle; son attribut alt est donc le seul nom qu’un peut annoncer. Sans lui, le bouton est annoncé simplement comme « bouton » ou par son nom de fichier. Un formulaire dont le bouton d’envoi ne peut pas être identifié est un formulaire que certains visiteurs ne pourront pas remplir en toute confiance — un obstacle direct aux demandes d’information, aux inscriptions et aux achats.
Contrairement aux images ordinaires, un bouton ne peut jamais être décoratif : il fait toujours quelque chose; il a donc toujours besoin d’un nom.
Comment corriger
- Ajoutez un attribut
altqui nomme l’action effectuée par le bouton, par exemple « Rechercher » ou « Envoyer le message », comme dans l’exemple ci-dessus. - Ne laissez pas l’attribut vide — un
alt=""vide masque le nom du bouton sans masquer le bouton. - Sinon, remplacez le bouton d’image par un élément
<button>contenant du vrai texte, plus simple à styliser et accessible par défaut.
Comment Silktide teste cela
- Repérer chaque bouton d’image (
<input type="image">) sur chaque page. - Ignorer les boutons masqués aux lecteurs d’écran.
- Signaler chaque bouton dont l’attribut
altest manquant ou vide.
Les boutons dont le texte alternatif existe mais semble peu utile sont couverts par le contrôle distinct Texte alternatif du bouton d’envoi.