Bouton sans intitulé pertinent : RGAA 11.9

Q: Un tooltip (title) suffit-il comme intitulé de bouton ?

Non. L'attribut title fournit un nom accessible mais il n'est pas visible au clavier seul et n'est pas annoncé par tous les lecteurs d'écran de la même façon. Préfère un aria-label ou un texte visible.

Q: Comment gérer un bouton avec une icône ET du texte visible ?

Place aria-hidden="true" sur l'icône et laisse le texte visible être l'intitulé du bouton. N'ajoute pas de aria-label supplémentaire si le texte visible est déjà descriptif : cela crée une redondance.

C'est quoi

Le critère 11.9 porte sur la pertinence de l'intitulé du bouton : avoir un nom accessible ne suffit pas - ce nom doit aussi décrire l'action déclenchée de façon non ambiguë. Un intitulé est pertinent quand il décrit clairement l'action déclenchée :

"Envoyer le formulaire de contact" : pertinent.
"OK" : non pertinent (aucune information sur ce qui va se passer).
"Valider" seul dans une page avec plusieurs formulaires : ambigu. Le nom accessible d'un bouton peut venir de plusieurs sources :
Le texte visible du bouton : <button>Envoyer le message</button>.
L'attribut value d'un input : <input type="submit" value="Commander">.
Un attribut aria-label : <button aria-label="Fermer la modale">×</button>.
Un attribut aria-labelledby pointant vers un texte visible. Le cas le plus courant d'échec : les boutons icône (loupe, croix, chevron) sans texte visible ni aria-label, qui n'ont aucun intitulé pertinent.

Qui est touché

Les personnes aveugles ou malvoyantes : le lecteur d'écran annonce le nom du bouton. Sans nom pertinent, l'utilisateur ne sait pas ce que le bouton fait avant de l'activer.
Les personnes utilisant la commande vocale (Dragon NaturallySpeaking, commande vocale iOS) : elles activent les boutons en disant leur intitulé. Un bouton sans texte ou avec un intitulé non pertinent est inactivable à la voix.

Impact business

Un bouton sans intitulé pertinent oblige l'utilisateur de lecteur d'écran à activer le bouton pour découvrir son effet, ou à renoncer sans comprendre ce qu'il déclenche.

Pour les utilisateurs de commande vocale, un bouton icône sans aria-label est simplement inutilisable : aucune commande vocale ne peut l'atteindre.

Cette erreur est fréquente sur les boutons de fermeture de modales, les boutons de lecture audio/vidéo, les boutons de navigation (précédent/suivant) et les formulaires de recherche.

Sources des chiffres

Comment le détecter

Audit Mynto : le scan détecte les boutons sans nom accessible et les boutons dont le nom visible et le nom accessible ne concordent pas.
Manuel : navigue dans la page avec Tab et écoute ce qu'annonce le lecteur d'écran sur chaque bouton. Ou inspecte le code : cherche les <button> et <input type="submit|reset|button"> sans texte ni aria-label.
Vérifie les boutons icône en particulier : une icône seule sans texte caché ni aria-label est presque toujours en échec sur ce critère.

Comment corriger

Avant - HTML

<!-- Bouton icône sans intitulé - lecteur d'écran dit "bouton" sans plus -->
<button>
  <svg aria-hidden="true" ...><!-- icône loupe --></svg>
</button>

<!-- Bouton submit avec valeur vague -->
<input type="submit" value="OK">

Après - HTML

<!-- Bouton icône avec aria-label explicite -->
<button aria-label="Rechercher">
  <svg aria-hidden="true" ...><!-- icône loupe --></svg>
</button>

<!-- Bouton submit avec valeur descriptive -->
<input type="submit" value="Envoyer le formulaire de contact">

Pour les boutons avec du texte visible, assure-toi que ce texte est descriptif. Remplace "OK" par "Confirmer ma commande", "Valider" par "Valider mon inscription", etc.

Pour les boutons icône sans texte visible, ajoute un aria-label décrivant l'action du bouton. Place aria-hidden="true" sur l'icône SVG pour éviter qu'elle soit lue en double.

Sur WordPress, les boutons générés par les constructeurs de pages (Elementor, Bricks, Divi) ont un champ "Texte du bouton" et parfois "Texte alternatif" ou "Etiquette ARIA" dans leurs options avancées. Remplis toujours ce champ avec un texte précis.

Questions fréquentes

Est-ce qu'un bouton "Envoyer" sans contexte est suffisant ?

Cela dépend du contexte. Si la page ne contient qu'un seul formulaire, "Envoyer" est généralement suffisant. Si la page contient plusieurs formulaires ou si l'action n'est pas évidente, un intitulé plus précis comme "Envoyer le formulaire de contact" évite toute ambiguïté.

Un tooltip (title) suffit-il comme intitulé de bouton ?

Non. L'attribut title fournit un nom accessible mais il n'est pas visible au clavier seul et n'est pas annoncé par tous les lecteurs d'écran de la même façon. Préfère un aria-label ou un texte visible.

Comment gérer un bouton avec une icône ET du texte visible ?

Place aria-hidden="true" sur l'icône et laisse le texte visible être l'intitulé du bouton. N'ajoute pas de aria-label supplémentaire si le texte visible est déjà descriptif : cela crée une redondance.

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.

Bouton sans intitulé pertinent