Critère RGAA 11.1 · Formulaires
Critère RGAA 11.1 : Champ de formulaire avec étiquette
Les formulaires doivent être compréhensibles, correctement étiquetés, assistés par des messages d’erreur et utilisables au clavier.
Comprendre le critère
Le critère RGAA 11.1 porte sur la compréhension et la correction des champs de formulaire. L’objectif est de vérifier que cette information ou cette fonctionnalité reste disponible dans le code, pas seulement dans le rendu visuel.
Chaque champ doit pouvoir être identifié, rempli, contrôlé et corrigé sans dépendre uniquement de la position visuelle ou d’un message implicite.
Pourquoi c'est important ?
Un formulaire inaccessible bloque souvent une démarche entière : compte, achat, demande administrative, contact ou paiement.
Une erreur sur "Champ de formulaire avec étiquette" peut créer une rupture très concrète : contenu non annoncé, action impossible au clavier, information ambiguë ou parcours incompréhensible pour une technologie d’assistance.
Exemple non conforme
Le champ n’a pas d’étiquette programmatiquement associée.
<span>Email</span>\n<input type="email" name="email">Exemple conforme
Le label est lié au champ avec for et id.
<label for="email">Adresse e-mail</label>\n<input id="email" name="email" type="email">Comment vérifier ce critère ?
- Identifier toutes les occurrences concernées par "Champ de formulaire avec étiquette" sur la page auditée.
- Lister les champs, groupes, boutons, aides, erreurs et champs obligatoires.
- Vérifier les associations programmatiques : label, fieldset/legend, aria-describedby, aria-invalid et autocomplete.
- Soumettre le formulaire avec des erreurs pour contrôler les messages et suggestions de correction.
Erreurs fréquentes
- Remplacer le label par un placeholder.
- Afficher une erreur sans la relier au champ.
- Ne pas indiquer les champs obligatoires avant la soumission.
- Utiliser un bouton dont l’intitulé ne décrit pas l’action.
Questions fréquentes
Ce critère peut-il être testé automatiquement ?
Partiellement. Les labels absents se détectent, mais la pertinence des aides et erreurs doit être vérifiée.
Quel est le premier réflexe pour corriger "Champ de formulaire avec étiquette" ?
Revenir au besoin utilisateur, puis utiliser le HTML natif le plus approprié avant d’ajouter ARIA, CSS ou JavaScript.
Quand considérer le critère comme non applicable ?
Uniquement lorsque la page ne contient aucun contenu, composant ou cas visé par le critère. Cette décision doit être justifiée dans la grille d’audit.
Tester ce critère avec AllyNizer
Lancez une analyse de page pour repérer les erreurs automatiques, puis complétez avec les vérifications manuelles proposées dans cette fiche.