Libellé dans le nom

Silktide compare le texte que les visiteurs voient sur les boutons et les liens avec le nom qu’utilisent les pour le même contrôle. Quand les deux ne correspondent pas, les personnes qui commandent des sites web à la voix ne peuvent pas activer le contrôle en disant ce qu’elles voient.

Pourquoi c’est important

Les utilisateurs de la reconnaissance vocale regardent l’écran et disent ce qu’ils voient : "cliquer sur Envoyer". Le logiciel fait correspondre ces mots au de chaque contrôle — le nom qu’utilisent les technologies d’assistance. Des attributs comme aria-label remplacent ce nom ; ainsi, un bouton qui affiche "Envoyer" mais porte aria-label="Soumettre" ne répond qu’à "cliquer sur Soumettre". Le mot visible échoue en silence, et l’utilisateur n’a aucun moyen de découvrir le nom caché qu’il était censé prononcer.

La discordance déroute aussi 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 (Libellé dans le nom), une exigence de — partie du niveau de conformité le plus basique.

Comment corriger

Supprimez la surcharge là où elle n’apporte rien : un bouton dont le texte visible indique déjà ce qu’il fait n’a pas besoin de aria-label.
Lorsque la surcharge ajoute du contexte, commencez-la par le texte visible : aria-label="En savoir plus sur les tarifs" pour un lien "En savoir plus" préserve la commande vocale.
N’utilisez jamais aria-label pour dire autre chose que le 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 : aucune surcharge -->
<button>Envoyer</button>

Comment Silktide teste ceci

Trouver les boutons et liens visibles sur chaque page, y compris les éléments avec un rôle ARIA button ou link.
Ne tester que les contrôles qui surchargent leur nom avec aria-label ou aria-labelledby — sans surcharge, le texte visible est le nom accessible et le critère est automatiquement respecté.
Lire le libellé visible du contrôle : son contenu textuel plus le des images qu’il contient. Les libellés de moins de 2 caractères sont ignorés, de même que les contrôles dont le nom accessible est vide (un autre problème couvert par d’autres vérifications).
Normaliser les deux chaînes — mise en minuscules, réduction des espaces et suppression de la ponctuation décorative — puis exiger que le libellé visible apparaisse dans le nom accessible.
Pour les liens de type carte contenant un titre et du texte d’accompagnement, accepter le titre comme libellé à la place, car c’est le texte qu’un visiteur dirait naturellement.

Dépannage

Le nom accessible est plus long que le texte visible

Cela convient, à condition que le texte visible y figure. 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 et autres champs de formulaire tirent leur libellé visible d’un élément <label> plutôt que de leur propre texte ; ils sont donc couverts par des vérifications de libellés distinctes, et non par celle-ci.