Bouton de formulaire
Un bouton de formulaire est l'élément HTML qui déclenche une action dans un formulaire : envoyer les données, réinitialiser les champs ou exécuter une fonction. Pour être accessible, il doit porter un intitulé explicite qui décrit l'action déclenchée, pas un simple « OK » ou « Envoyer ».
Un utilisateur de lecteur d'écran navigue dans votre page par liste de boutons. Il entend : « Envoyer », « Envoyer », « Envoyer ». Trois formulaires différents, le même intitulé. Impossible de savoir lequel fait quoi.
#Quels éléments HTML sont des boutons de formulaire ?
Le glossaire du RGAA reconnaît plusieurs éléments :
<button type="submit">et<button type="reset"><input type="submit">,<input type="reset">,<input type="image">- tout élément portant
role="button"dans un formulaire
La balise <button> est le choix le plus souple : elle accepte du texte, des icônes, du HTML. Un <input type="submit"> tire son intitulé de l'attribut value. Sans value, le navigateur affiche « Submit » en anglais, ce qui n'aide personne sur un site français.
<!-- Intitulé clair -->
<button type="submit">Valider la commande</button>
<!-- Intitulé générique — à éviter -->
<input type="submit" value="OK">
<!-- Bouton-icône : aria-label obligatoire -->
<button type="submit" aria-label="Rechercher">
<svg aria-hidden="true"><!-- icône loupe --></svg>
</button>#Les erreurs qui piègent tout le monde
Bouton sans intitulé accessible. Un <input type="image"> sans alt, un <button> contenant uniquement un SVG sans aria-label. Le lecteur d'écran annonce « bouton » et rien d'autre. Deque classe ce défaut comme critique.
Le faux bouton en <div>. Un <div> stylé en bouton ne reçoit ni le focus clavier, ni le rôle « bouton » par défaut. Il faut role="button", tabindex="0" et la gestion des touches Entrée et Espace. Autant utiliser un vrai <button>.
Pas de bouton du tout. Certains formulaires déclenchent la soumission au onchange d'un champ (une liste déroulante qui recharge la page, par exemple). La technique W3C H32 l'interdit : sans bouton de soumission explicite, l'utilisateur perd le contrôle du moment où l'action se déclenche. C'est une violation du critère WCAG 3.2.2.
#Ce que dit le RGAA
Le critère 11.9 du RGAA exige que chaque bouton de formulaire ait un intitulé pertinent. « Pertinent » signifie que l'intitulé décrit l'action, pas juste son existence. « Valider la commande » passe le test. « OK » non.
Le critère WCAG 2.5.3 (Label in Name) ajoute une contrainte : si le bouton a un intitulé visible, son nom accessible doit le contenir. Un bouton qui affiche « Chercher » mais porte aria-label="Recherche avancée" crée un décalage entre ce que l'utilisateur voit et ce que la technologie d'assistance annonce.
#En résumé
Utilisez un vrai <button> avec un intitulé qui décrit l'action déclenchée. Si le bouton n'a pas de texte visible, ajoutez aria-label. Et si votre page contient plusieurs formulaires, chaque bouton doit être distinguable. Pas trois « Envoyer » d'affilée.