Le contenu textuel des éléments doit aussi se retrouver dans leur intitulé accessible

Pourquoi cette vérification existe

Les personnes qui commandent à la voix disent ce qu'elles voient. Si le bouton affiche « Envoyer » mais que son nom accessible est « Soumettre le formulaire », dire « clique Envoyer » ne fait rien.

Ce qui la déclenche habituellement

• échoueUn bouton affichant « Rechercher » avec `aria-label="Soumettre"`.
• échoueUn `aria-label` qui remplace le texte visible au lieu de le compléter.

Comment corriger

• à faireCommencez le nom accessible par le texte visible : `aria-label="Rechercher des produits"` sur un bouton affichant « Rechercher ».
• à faireMieux encore : ne remplacez pas une étiquette visible.

Comment c'est signalé

A11ySignal le signale avec un impact grave. Chaque élément en échec arrive avec son sélecteur CSS et le balisage fautif, pour aller droit à la ligne plutôt que de la chercher. Deque publie le détail au niveau du moteur :

https://dequeuniversity.com/rules/axe/4.13/label-content-name-mismatch ↗

Vérification implémentée par axe-core 4.13.0, © Deque Systems, MPL-2.0.