Étiquette dans le nom

Ce que le critère demande

Si un bouton affiche « Soumettre la demande » à l’écran, un utilisateur de commande vocale doit pouvoir dire « cliquer Soumettre la demande » et que le clic s’effectue. Cela ne fonctionne que si l’étiquette visible est contenue dans le nom accessible — idéalement comme premiers mots. Si le nom accessible est « Envoyer le formulaire » alors que le texte visible indique « Soumettre la demande », la commande vocale échoue silencieusement.

WCAG exige que le texte de l’étiquette visible fasse partie du nom accessible. Le nom accessible peut contenir davantage (contexte de clarification), mais le texte visible doit y figurer, dans le même ordre de mots.

Comment y répondre

• Pour les boutons et les liens avec du texte, aucune action particulière n’est nécessaire — le contenu texte devient automatiquement le nom accessible.
• Lorsqu’on ajoute aria-label à un contrôle qui a déjà un texte visible, inclure le texte visible au début : <button aria-label="Soumettre la demande — ouvre la confirmation">Soumettre la demande</button>.
• Pour les boutons icône + texte, laisser le texte piloter le nom. Ne pas l’écraser avec un aria-label réservé à l’icône.
• Pour les liens dont le texte est « Lire la suite », étendre le nom accessible avec aria-label="Lire la suite sur WCAG 2.2 — article complet" afin que le « Lire la suite » visible reste le préfixe.
• Lorsque l’étiquette visible d’un contrôle est une image (icône avec superposition de texte, logo), s’assurer que l’alt correspond exactement au texte visible.

Échecs courants

• Un bouton affichant « Rechercher » avec aria-label="Trouver". Les utilisateurs vocaux disent « cliquer Rechercher », rien ne se passe.
• Des boutons « Ajouter au panier » avec aria-label="Ajouter un T-shirt bleu taille M à votre panier" — nom verbeux, le « Ajouter au panier » visible n’est plus le préfixe. La commande vocale « cliquer Ajouter au panier » échoue.
• Des boutons icône + texte où le concepteur a ajouté aria-label="icône panier" et écrasé le texte visible « Valider ».
• Des sites localisés où le texte visible a été traduit mais l’aria-label est encore en anglais.
• Des boutons d’action flottants qui affichent « Chat » visiblement mais portent aria-label="Ouvrir le widget d'assistance".

Pourquoi c’est important

Ce critère de succès conditionne l’accessibilité pour les utilisateurs de commande vocale — personnes utilisant Dragon NaturallySpeaking, Contrôle vocal sur iOS / macOS, Voice Access sur Android, ou la reconnaissance vocale Windows. Pour ces utilisateurs, l’étiquette visible est la commande. Une discordance n’est pas un inconvénient mineur ; c’est la différence entre opérable et non opérable. Cela aide également les utilisateurs de lecteurs d’écran à suivre quand un aidant voyant dit « cliquer sur le bouton Enregistrer » — l’annonce correspond aux mots affichés à l’écran. Le critère 2.5.3 est facile à corriger et facile à manquer, car les outils automatisés le signalent rarement : un développeur lisant le code voit un aria-label et suppose que c’est correct. Il faut toujours vérifier le nom accessible par rapport au texte visible.