RGAA 11.2 — Chaque étiquette associée à un champ de formulaire est-elle pertinente ?

Nom accessible ne contient pas l'étiquette visible

Le problème

Ce problème survient lorsque le nom accessible d'un composant interactif (déterminé par aria-label, aria-labelledby, ou le texte contenu) ne contient pas le texte de l'étiquette visible. Le critère RGAA 11.2 (correspondant au WCAG 2.5.3, niveau A) exige que le nom accessible contienne au minimum le texte de l'étiquette visible.

Par exemple, si un bouton affiche visuellement « Rechercher » mais possède un aria-label="Lancer une requête dans la base de données", un utilisateur de commande vocale qui dit « cliquer Rechercher » ne pourra pas activer le bouton car le mot « Rechercher » n'est pas dans le nom accessible.

Ce problème est courant quand les développeurs ajoutent des aria-label « améliorés » qui reformulent l'étiquette visible au lieu de la contenir. Il apparaît aussi avec des composants dont le texte visible est tronqué par CSS (text-overflow: ellipsis) tandis que le nom accessible contient le texte complet mais dans un ordre différent.

Impact sur les utilisateurs

Les utilisateurs de commande vocale (Dragon NaturallySpeaking, Voice Control d'Apple, Voice Access d'Android) sont directement affectés. Ils activent les contrôles en énonçant leur texte visible. Si le nom accessible ne contient pas ce texte, la commande vocale ne trouve pas le contrôle et l'utilisateur ne peut pas l'activer.

Cela crée une frustration importante : l'utilisateur voit un bouton « Envoyer » mais ne peut pas l'activer par la voix parce que son aria-label est « Soumettre le formulaire de contact ». L'interface visuelle et l'interface programmatique sont désynchronisées.

Les utilisateurs de lecteurs d'écran sont moins affectés (ils entendent le nom accessible), mais la divergence entre ce qu'un utilisateur voyant décrit et ce que le lecteur d'écran annonce crée de la confusion dans les situations d'assistance (quand quelqu'un aide un utilisateur de lecteur d'écran par téléphone, par exemple).

Votre site a-t-il ce problème ?

106 critères RGAA analysés en 5 minutes par notre IA.

Testez votre site gratuitement

Exemple de code

Avant (non conforme)

<!-- Nom accessible ne contient pas le texte visible -->
<button aria-label="Lancer une requête">
  Rechercher
</button>

<!-- Le label visible ne correspond pas au nom accessible -->
<label for="search">Recherche</label>
<input id="search" aria-label="Saisir un terme de recherche">

<!-- Icône avec texte visible mais aria-label différent -->
<button aria-label="Supprimer l'élément sélectionné">
  <svg>...</svg> Retirer
</button>

Après (conforme)

<!-- Le nom accessible contient le texte visible -->
<button aria-label="Rechercher dans le catalogue">
  Rechercher
</button>

<!-- Le label et le nom accessible sont cohérents -->
<label for="search">Recherche</label>
<input id="search"
  aria-label="Recherche dans les articles du blog">

<!-- Le nom accessible inclut le texte visible -->
<button aria-label="Retirer de la liste">
  <svg>...</svg> Retirer
</button>

Comment Scrutia détecte ce problème

Scrutia compare le texte visible de chaque élément interactif avec son nom accessible calculé (issu de aria-label, aria-labelledby, ou du contenu textuel). Il signale les cas où le nom accessible ne contient pas le texte visible. Le rapport identifie l'élément, affiche le texte visible et le nom accessible, et propose une correction qui inclut le texte visible dans le nom accessible.

Questions fréquentes

Le nom accessible doit-il être identique au texte visible ?

Non, il peut contenir des informations supplémentaires, mais il doit au minimum contenir le texte visible. Par exemple, si le bouton affiche « Envoyer », aria-label="Envoyer le formulaire" est correct, mais aria-label="Soumettre" ne l'est pas.

Quels utilisateurs sont le plus affectés ?

Les utilisateurs de commande vocale sont les plus directement affectés car ils ne peuvent pas activer les contrôles dont le nom accessible ne correspond pas au texte visible. Les utilisateurs de lecteurs d'écran peuvent aussi être désorientés par la différence.

Comment tester ce critère ?

Inspectez chaque contrôle interactif dans les DevTools du navigateur, onglet Accessibilité, et comparez le « Accessible Name » avec le texte visuellement affiché. Le texte visible doit être contenu dans le nom accessible. Scrutia automatise cette vérification.

Les textes visuellement masqués (sr-only) sont-ils concernés ?

Si un texte est visuellement masqué mais contribue au nom accessible, il n'est pas considéré comme « texte visible ». Seul le texte effectivement visible à l'écran doit être contenu dans le nom accessible.

Votre site a-t-il ce problème ?

Scrutia audite votre site sur 106 critères RGAA en 5 minutes. Navigation clavier, composants ARIA, focus visible, contrastes, et bien plus.

Lancer un audit gratuit