RGAA Lab

RGAA 4.1.2 · Formulaires · Critère 11.1

Chaque champ de formulaire a-t-il une étiquette ?

Un champ sans étiquette est annoncé « zone d'édition » et rien d'autre : la personne qui l'entend doit deviner ce qu'on lui demande, ou abandonner la démarche.

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.1.1
    Chaque champ de formulaire vérifie-t-il une de ces conditions ?
    • Le champ de formulaire possède un attribut WAI-ARIA aria-labelledby référençant un passage de texte identifié ;
    • Le champ de formulaire possède un attribut WAI-ARIA aria-label ;
    • Une balise <label> ayant un attribut for est associée au champ de formulaire ;
    • Le champ de formulaire possède un attribut title ;
    • Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.
  2. 11.1.2
    Chaque champ de formulaire associé à une balise <label> ayant un attribut for, vérifie-t-il ces conditions ?
    • Le champ de formulaire possède un attribut id ;
    • La valeur de l’attribut for est égale à la valeur de l’attribut id du champ de formulaire associé.
  3. 11.1.3
    Chaque champ de formulaire ayant une étiquette dont le contenu n’est pas visible ou à proximité (masqué, aria-label) ou qui n’est pas accolé au champ (aria-labelledby), vérifie-t-il une de ses conditions ?
    • Le champ de formulaire possède un attribut title dont le contenu permet de comprendre la nature de la saisie attendue ;
    • Le champ de formulaire est accompagné d’un passage de texte accolé au champ qui devient visible à la prise de focus permettant de comprendre la nature de la saisie attendue ;
    • Le champ de formulaire est accompagné d’un passage de texte visible accolé au champ permettant de comprendre la nature de la saisie attendue.

Comment le vérifier

  1. Recenser tous les champs de saisie, y compris ceux construits en ARIA (role="textbox", role="combobox", role="switch"…).
  2. Pour chacun, chercher ce qui lui donne un nom : un <label for>, un aria-label, un aria-labelledby, un title, ou un bouton adjacent qui l'étiquette.
  3. Quand c'est un <label for>, vérifier que le champ porte un id et que le for reprend exactement cette valeur.
  4. Quand l'étiquette n'est ni visible ni accolée au champ — cas d'un aria-label ou d'un aria-labelledby distant — vérifier qu'un title ou un passage de texte accolé permet quand même de comprendre la saisie attendue.

Ce que notre outil fait

Détecté automatiquement

Notre moteur tranche seul sur ce critère : un échec est une non-conformité, avec la preuve qui va avec.

La règle constate l'absence de nom accessible sur les champs de formulaire : c'est un échec sans appel. Elle ne dit pas si ce nom vient d'une source que le référentiel accepte — un placeholder seul lui suffit, pas au RGAA.

Règles ACT du W3C mises en œuvre : e086e5

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.

  • Un placeholder n'est pas une étiquette : il disparaît dès la première frappe, et le champ redevient anonyme au moment précis où l'on vérifie sa saisie.
  • Un <label> qui enveloppe son champ sans attribut for fonctionne dans les navigateurs, mais le référentiel demande explicitement le couple for / id.
  • Deux champs portant le même id sur une page : le for n'en désigne qu'un, l'autre reste sans étiquette alors que le rendu semble correct.
  • Un champ de recherche étiqueté par la seule loupe du bouton adjacent : le bouton doit lui-même avoir un nom accessible, sinon rien n'étiquette rien.

À lire avec