Étiquette dans le nom

Silktide compare le texte que les visiteurs peuvent voir sur les boutons et les liens avec le nom que les technologies d’assistance utilisent pour le même contrôle. Lorsque les deux ne correspondent pas, les personnes qui utilisent des sites Web par la voix ne peuvent pas activer le contrôle en disant ce qu’elles voient.

Pourquoi est-ce important?

Les utilisateurs de la reconnaissance vocale regardent l’écran et disent ce qu’ils voient : « cliquer sur Envoyer ». Le logiciel associe ces mots au de chaque contrôle, soit le nom qu’utilisent les . Des attributs comme aria-label remplacent ce nom; ainsi, un bouton affichant « Envoyer », mais portant l’étiquette aria-label="Soumettre", ne répond qu’à « cliquer sur Soumettre ». Le mot visible échoue silencieusement, et l’utilisateur n’a aucun moyen de découvrir le nom caché qu’il était censé dire.

Cette incohérence déroute également les utilisateurs de qui travaillent avec des collègues voyants, car ils entendent un nom différent de celui que voit la personne à côté d’eux.

Il s’agit du critère de succès 2.5.3 des (Étiquette dans le nom), une exigence de , qui fait partie du niveau de conformité le plus élémentaire.

Comment corriger le problème

Supprimez le remplacement lorsqu’il n’ajoute rien : un bouton dont le texte visible indique déjà ce qu’il fait n’a pas besoin de aria-label.
Lorsque le remplacement ajoute du contexte, commencez-le par le texte visible : aria-label="En savoir plus sur les tarifs" pour un lien « En savoir plus » permet de conserver le fonctionnement de la commande vocale.
N’utilisez jamais aria-label pour indiquer quelque chose de différent du texte visible.

<!-- Problème : affiche « Envoyer », mais répond à « Soumettre » -->
<button aria-label="Soumettre">Envoyer</button>

<!-- Correction : le texte visible est inclus dans le nom accessible -->
<button aria-label="Envoyer le message">Envoyer</button>

<!-- Correction la plus simple : aucun remplacement -->
<button>Envoyer</button>

Comment Silktide effectue cette vérification

Repérez les boutons et les liens visibles sur chaque page, y compris les éléments ayant un rôle ARIA button ou link.
Testez uniquement les contrôles dont le nom est remplacé par aria-label ou aria-labelledby : sans remplacement, le texte visible est le nom accessible et le critère est automatiquement respecté.
Lisez l’étiquette visible du contrôle : son contenu textuel, ainsi que le de toute image qu’il contient. Les étiquettes de moins de 2 caractères sont ignorées, tout comme les contrôles dont le nom accessible est vide (un problème distinct couvert par d’autres vérifications).
Normalisez les deux chaînes — en les mettant en minuscules, en réduisant les espaces et en supprimant la ponctuation décorative — puis exigez que l’étiquette visible apparaisse dans le nom accessible.
Pour les liens de type carte contenant un titre et du texte complémentaire, acceptez plutôt le titre comme étiquette, puisqu’il s’agit du texte qu’un visiteur dirait naturellement.

Résolution des problèmes

Le nom accessible est plus long que le texte visible

C’est acceptable, à condition que le texte visible y apparaisse. Les WCAG recommandent que le nom accessible commence par le texte visible, mais n’importe quel emplacement réussit cette vérification.

Les champs de formulaire ne sont pas testés

Les champs de saisie de texte et les autres champs de formulaire tirent leur étiquette visible d’un élément <label> plutôt que de leur propre texte; ils sont donc couverts par des vérifications distinctes de l’étiquetage plutôt que par celle-ci.