Les boutons de vos formulaires indiquent-ils clairement l'action qu'ils vont déclencher ?
Critère officiel 11.9 — Dans chaque formulaire, l’intitulé de chaque bouton est-il pertinent (hors cas particuliers) ?
Pourquoi c'est important
Un bouton générique « Envoyer » ou « Valider » ne dit pas ce que l'action va produire concrètement. Pour une personne aveugle ou avec des troubles cognitifs, l'absence de précision sur la conséquence d'un clic peut provoquer une hésitation bloquante — surtout pour les formulaires administratifs à enjeu.
Exemples concrets
Ce qui est conforme
Le formulaire de demande de logement social se termine par le bouton « Soumettre ma demande de logement ». L'utilisateur sait exactement ce qui va se passer quand il clique et peut décider en connaissance de cause.
Ce qui pose problème
Le même formulaire se termine par un bouton « Envoyer ». Sur une page qui comporte aussi un formulaire de contact, l'utilisateur ne sait pas avec certitude quel formulaire sera soumis ni quelle suite sera donnée à son action.
Comment agir
Pour chaque bouton de soumission, précisez l'action déclenchée : « Envoyer ma demande de renseignements », « M'inscrire à la newsletter », « Confirmer mon inscription à l'activité ». Évitez systématiquement les intitulés génériques (Valider, OK, Envoyer) — chaque bouton doit être compréhensible sans lire le reste de la page.
Règles clés
- L'intitulé doit décrire l'action ET son objet si nécessaire pour l'unicité : 'Supprimer le commentaire', pas juste 'Supprimer'.
- Un bouton icône sans texte visible doit avoir un aria-label décrivant l'action.
- Le nom accessible doit contenir les mots de l'intitulé visible (critère 2.5.3) — aria-label ne doit pas contredire le texte visible.
- Sur une page avec plusieurs formulaires identiques (liste d'articles), chaque bouton 'Supprimer' doit être contextualisé : aria-label='Supprimer l'article Titre de l'article'.
Erreurs fréquentes
- Bouton contenant uniquement une icône SVG ou une image sans aria-label ni texte accessible
- Bouton avec intitulé générique ambigu : 'OK', 'Valider', 'Envoyer' répété sans contexte sur la même page
- input type="image" sans attribut alt
- Bouton de fermeture d'une modal : croix (×) sans aria-label
- Bouton dont l'intitulé visible 'Supprimer' a un aria-label 'delete' — violation de 2.5.3
- Bouton avec role='combobox' dont le texte interne devient la valeur et non le nom accessible : le bouton perd son étiquette accessible même si le texte reste visuellement présent
Exemples de code
bouton icône sans alternative
✗ Non conforme<button type="button" class="btn-fermer">
<svg aria-hidden="true"><use href="#icon-close"/></svg>
</button>Le SVG est masqué aux AT (aria-hidden). Le bouton est vide — annoncé comme 'bouton' sans nom. Inutilisable pour un lecteur d'écran et une commande vocale.
bouton icône avec aria-label
✓ Conforme<button type="button" class="btn-fermer"
aria-label="Fermer la fenêtre">
<svg aria-hidden="true" focusable="false">
<use href="#icon-close"/>
</svg>
</button>aria-label fournit le nom accessible. focusable="false" sur le SVG évite qu'il soit focusable dans IE11. L'action est clairement décrite.
boutons ambigus répétés
✗ Non conforme<!-- Liste de commentaires -->
<article>
<p>Commentaire de Paul</p>
<button type="button">Supprimer</button>
</article>
<article>
<p>Commentaire de Marie</p>
<button type="button">Supprimer</button>
</article>Dans la liste des boutons (raccourci lecteur d'écran), on voit deux boutons 'Supprimer' identiques sans contexte. L'utilisateur ne sait pas lequel supprime quoi.
boutons contextualisés via aria-label
✓ Conforme<article>
<p>Commentaire de Paul</p>
<button type="button"
aria-label="Supprimer le commentaire de Paul">
Supprimer
</button>
</article>
<article>
<p>Commentaire de Marie</p>
<button type="button"
aria-label="Supprimer le commentaire de Marie">
Supprimer
</button>
</article>L'intitulé visible reste 'Supprimer' (concis visuellement). Le aria-label contextualise pour les AT et la commande vocale. 2.5.3 est respecté car aria-label contient le mot 'Supprimer' du label visible.
Référence WCAG : 2.5.3, 4.1.2