Thématique 11 · Formulaires

Critère RGAA 11.1 : Étiquette des champs de formulaire

Sans étiquette, un lecteur d'écran annonce « champ de saisie » sans dire ce qu'il faut y saisir.

Niveau: AA
WCAG 2.2: 1.3.1, 2.4.6, 3.3.2, 4.1.2
Thématique: Formulaires
Vérification: Détecté automatiquement

La question posée par le RGAA

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

Comment respecter ce critère

Associez à chaque champ une étiquette avec label for/id, ou aria-labelledby.
Un texte indicatif (placeholder) ne remplace pas une étiquette : il disparaît à la saisie.

Exemple

Un champ de formulaire n'a pas d'étiquette associée.

✗ À éviter

<input type="email">

✓ À faire

<label for="mail">E-mail</label><input id="mail" type="email">

Les tests officiels

Pour être conforme, chaque élément concerné de la page doit satisfaire les tests suivants :

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.)
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é.)
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.)

Source : RGAA 4.1.2, critère 11.1, DINUM (nouvel onglet), sous Licence Ouverte. Le RGAA précise aussi des cas particuliers et un glossaire à consulter pour un audit officiel.

Comment Accessia le vérifie

Accessia détecte automatiquement les manquements à ce critère : l'analyse en ligne et l'extension Chrome localisent chaque élément en cause et proposent le correctif. Un contrôle humain reste utile pour les cas particuliers.