RGAA Lab

RGAA 4.1.2 · Formulaires · Critère 11.4

Dans chaque formulaire, chaque étiquette de champ et son champ associé sont-ils accolés (hors cas particuliers) ?

Qui consulte à fort grossissement ne voit qu'une fraction de l'écran : une étiquette posée loin de son champ sort du cadre, et le champ redevient une boîte vide.

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.4.1
    Chaque étiquette de champ et son champ associé sont-ils accolés ?
  2. 11.4.2
    Chaque étiquette accolée à un champ (à l’exception des cases à cocher, bouton radio ou balises ayant un attribut WAI-ARIA role="checkbox", role="radio" ou role="switch"), vérifie-t-elle ces conditions (hors cas particuliers) ?
    • L’étiquette est visuellement accolée immédiatement au-dessus ou à gauche du champ de formulaire lorsque le sens de lecture de la langue de l’étiquette est de gauche à droite ;
    • L’étiquette est visuellement accolée immédiatement au-dessus ou à droite du champ de formulaire lorsque le sens de lecture de la langue de l’étiquette est de droite à gauche.
  3. 11.4.3
    Chaque étiquette accolée à un champ de type checkbox ou radio ou à une balise ayant un attribut WAI-ARIA role="checkbox", role="radio" ou role="switch", vérifie-t-elle ces conditions (hors cas particuliers) ?
    • L’étiquette est visuellement accolée immédiatement au-dessous ou à droite du champ de formulaire lorsque le sens de lecture de la langue de l’étiquette est de gauche à droite ;
    • L’étiquette est visuellement accolée immédiatement au-dessous ou à gauche du champ de formulaire lorsque le sens de lecture de la langue de l’étiquette est de droite à gauche.

Comment le vérifier

  1. Agrandir la page à 200 %, ou l'observer à la loupe d'écran, et vérifier qu'étiquette et champ restent visibles ensemble.
  2. Vérifier la position : pour un champ de saisie ordinaire, l'étiquette est immédiatement au-dessus ou à gauche (langue lue de gauche à droite).
  3. Pour les cases à cocher, boutons radio et interrupteurs, la règle s'inverse : l'étiquette est immédiatement en dessous ou à droite.
  4. Vérifier qu'aucun contenu ne s'intercale entre l'étiquette et son champ — une aide, une icône, un message.

Ce que notre outil fait

Assisté

Le moteur repère les éléments concernés et vous pose la question. Il ne conclut pas à votre place.

L'accolement se mesure au rendu, pas dans le balisage : deux pages au code identique peuvent l'une réussir et l'autre échouer sur une seule feuille de styles. L'outil peut vous désigner les couples champ / étiquette ; la position, c'est vous qui la constatez.

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.

  • Les formulaires en deux colonnes fabriquent le cas type : l'étiquette à gauche du bloc, le champ à droite, séparés de plusieurs centaines de pixels sur grand écran.
  • Une étiquette flottante qui remonte au-dessus du champ à la saisie satisfait souvent le critère — mais vérifiez son état au repos, avant toute interaction.

À lire avec