RGAA Lab

RGAA 4.1.2 · Formulaires · Critère 11.2

Chaque étiquette associée à un champ de formulaire est-elle pertinente (hors cas particuliers) ?

« Champ 1 » satisfait le 11.1 et ne dit à personne ce qu'il faut y écrire : c'est ce critère qui sépare un formulaire balisé d'un formulaire utilisable.

Ce que dit le référentiel

Transcription du RGAA 4.1.2, sans interprétation. C’est ce texte qui fait foi, et celui que vous citez dans un rapport.

  1. 11.2.1
    Chaque balise <label> permet-elle de connaître la fonction exacte du champ de formulaire auquel elle est associée ?
  2. 11.2.2
    Chaque attribut title permet-il de connaître la fonction exacte du champ de formulaire auquel il est associé ?
  3. 11.2.3
    Chaque étiquette implémentée via l’attribut WAI-ARIA aria-label permet-elle de connaître la fonction exacte du champ de formulaire auquel elle est associée ?
  4. 11.2.4
    Chaque passage de texte associé via l’attribut WAI-ARIA aria-labelledby permet-il de connaître la fonction exacte du champ de formulaire auquel il est associé ?
  5. 11.2.5
    Chaque champ de formulaire ayant un intitulé visible vérifie-t-il ces conditions (hors cas particuliers) ?
    • S’il est présent, le contenu de l’attribut WAI-ARIA aria-label du champ de formulaire contient au moins l’intitulé visible ;
    • S’il est présent, le passage de texte lié au champ de formulaire via un attribut WAI-ARIA aria-labelledby contient au moins l’intitulé visible ;
    • S’il est présent, le contenu de l’attribut title du champ de formulaire contient au moins l’intitulé visible ;
    • S’il est présent le contenu de la balise <label> associé au champ de formulaire contient au moins l’intitulé visible.
  6. 11.2.6
    Chaque bouton adjacent au champ de formulaire qui fournit une étiquette visible permet-il de connaître la fonction exacte du champ de formulaire auquel il est associé ?

Comment le vérifier

  1. Lire chaque étiquette seule, sans le reste de la page, et se demander ce qu'on saisirait.
  2. Faire le même exercice pour les étiquettes invisibles : title, aria-label, passage lié par aria-labelledby.
  3. Quand le champ a un intitulé visible, vérifier que son nom accessible contient cet intitulé mot pour mot — c'est ce qui permet à la commande vocale de désigner le champ.
  4. Écarter les étiquettes qui n'ont de sens que pour l'équipe qui a construit le formulaire : abréviations métier, codes internes, numéros de rubrique.

Ce que notre outil fait

Jugement humain

Aucune machine ne tranche ce critère. L’outil vous présente les éléments et enregistre votre constat.

Rien ne se conclut ici. La règle qui vérifie mécaniquement qu'un libellé visible se retrouve dans le nom accessible ne vise pas les champs de formulaire : sa population est faite de boutons, de liens, d'onglets — de tout ce qui se nomme par son contenu. Elle relève donc du 6.1 pour un lien et du 11.9 pour un bouton, et le référentiel le dit lui-même en découpant ce contrôle en trois tests. La pertinence d'une étiquette — un texte qui fait comprendre la saisie — reste de toute façon entièrement à votre charge.

Comment nous mesurons ce que l'outil sait faire · ce critère s'audite dans l'extension RGAA Lab.

Les pièges

Les erreurs qu’on rencontre vraiment, relevées au fil des audits.

  • aria-label="Rechercher" sur un champ dont le texte visible est « Recherche » : l'écart d'un mot suffit à faire échouer « cliquer sur Recherche » à la commande vocale.
  • Un title qui répète le <label> n'ajoute rien et se fait annoncer deux fois par certaines configurations.
  • « Nom » et « Prénom » côte à côte se lisent bien à l'œil ; entendus l'un après l'autre au milieu de douze champs, ils demandent souvent une précision (« Nom de famille »).

À lire avec