Dans chaque formulaire, chaque légende associée à un regroupement de champs de même nature est-elle pertinente ?
Un lecteur d’écran qui navigue dans un formulaire complexe compte sur la légende pour comprendre chaque groupe de champs. Si cette légende dit « Informations » ou « Groupe 1 », l’utilisateur entend une suite de champs sans lien apparent. Une légende floue, c’est un formulaire inaccessible.
Le critère 11.7 ne vérifie pas l’existence d’une légende (c’est le rôle du critère 11.6). Il vérifie si le texte de la légende décrit clairement la nature du regroupement. « Adresse de facturation » est pertinent. « Étape 2 » ou « Champs obligatoires » ne le sont pas : ces textes décrivent la structure du formulaire, pas la nature des données demandées.
La légende peut être portée par <legend>, un aria-label ou un aria-labelledby sur un élément avec role="group" ou role="radiogroup". Peu importe le mécanisme, c’est le contenu textuel qui est audité. Une légende pertinente répond à une seule question : si on lit ce texte sans voir les champs qui suivent, sait-on ce qu’on va remplir ?
Un test pour s'assurer que la légende de chaque groupe est explicite
Pertinence du texte de la légende du groupe
- Repérez tous les groupes de champs de même nature dans le formulaire :
<fieldset>, éléments avecrole="group"ourole="radiogroup". - Pour chaque groupe qui possède une légende (
<legend>,aria-label, ouaria-labelledby), lisez uniquement le texte de cette légende. - Vérifiez que ce texte décrit clairement la nature du regroupement. Un utilisateur qui lit cette seule légende doit comprendre ce qu’on va lui demander de remplir.
- Un texte générique (« Informations », « Étape 1 », « Groupe ») est non conforme.
- Si tous les groupes disposant d’une légende ont un texte pertinent, le test est validé.
Exemples
❌ Non conforme : Légende générique non pertinente
<fieldset>
<legend>Informations</legend>
<label for="fact-rue">Rue</label>
<input type="text" id="fact-rue" name="fact_rue">
<label for="fact-cp">Code postal</label>
<input type="text" id="fact-cp" name="fact_cp">
<label for="fact-ville">Ville</label>
<input type="text" id="fact-ville" name="fact_ville">
</fieldset>La légende « Informations » ne dit rien sur la nature des champs. NVDA annonce « Informations, groupe, Rue, zone de texte ». Dans un formulaire avec deux blocs d’adresse, l’utilisateur ne sait pas s’il saisit une adresse de livraison ou de facturation. Le doute entraîne des erreurs de saisie.
✅ Conforme : Légende descriptive et pertinente
<fieldset>
<legend>Adresse de facturation</legend>
<label for="fact-rue">Rue</label>
<input type="text" id="fact-rue" name="fact_rue">
<label for="fact-cp">Code postal</label>
<input type="text" id="fact-cp" name="fact_cp">
<label for="fact-ville">Ville</label>
<input type="text" id="fact-ville" name="fact_ville">
</fieldset>NVDA annonce « Adresse de facturation, groupe, Rue, zone de texte ». L’utilisateur comprend immédiatement le contexte de chaque champ. Lorsque le formulaire contient aussi un bloc « Adresse de livraison », la distinction est limpide.
✅ Conforme : Groupe de boutons radio avec légende sous forme de question
<fieldset>
<legend>Souhaitez-vous recevoir nos offres par e-mail ?</legend>
<label>
<input type="radio" name="newsletter" value="oui"> Oui
</label>
<label>
<input type="radio" name="newsletter" value="non"> Non
</label>
</fieldset>Pour un groupe de boutons radio, la légende joue le rôle de la question. Sans elle, l’utilisateur entend « Oui, bouton radio » sans savoir à quoi il répond. Une légende « Newsletter » serait trop vague ; une question complète est ici la meilleure approche.
Astuces et pièges
⚠️ Deux légendes identiques dans le même formulaire
Un formulaire de commande avec deux blocs d’adresse échoue si les deux <fieldset> portent la même légende « Votre adresse ». La légende doit distinguer les groupes entre eux, pas seulement les nommer. C’est l’erreur la plus fréquente relevée en audit sur les formulaires de paiement en ligne.
⚠️ Légende qui décrit la structure plutôt que le contenu
« Étape 1 », « Section obligatoire », « Champs requis » : ces textes décrivent la progression ou les règles du formulaire, pas la nature des données demandées. La légende doit répondre à « quoi remplit-on ? », pas à « où en est-on dans le formulaire ? ».
💡 Le test de la lecture isolée
Pour auditer ce critère rapidement, lisez seulement la légende sans regarder les champs. Vous devez comprendre ce qu’on va vous demander de remplir. Si vous avez besoin de lire les labels des champs pour comprendre le groupe, la légende n’est pas pertinente.
⚠️ role="group" avec aria-label : même règle que <fieldset>
Un <div role="group" aria-label="Coordonnées bancaires"> est évalué avec les mêmes critères qu’un <fieldset>. La pertinence de l’aria-label est jugée sur son contenu textuel : il doit décrire la nature du groupe, pas sa position dans la page ni son statut technique.
⚠️ Légende masquée visuellement : conforme pour 11.7 si le texte est pertinent
Une <legend> masquée par une classe sr-only reste valide pour le critère 11.7, qui porte sur la pertinence du texte, pas sur sa visibilité. Attention toutefois : le critère 11.6 vérifie que la légende est bien restituée par les technologies d’assistance, ce qui inclut des conditions de rendu spécifiques.
Questions fréquentes
Quelle différence entre le critère RGAA 11.6 et le critère 11.7 concernant la légende de formulaire ?
Le critère 11.6 vérifie l’existence d’une légende sur chaque regroupement de champs de même nature. Le critère 11.7 vérifie la qualité de cette légende. Un <fieldset> avec <legend>Groupe</legend> satisfait 11.6 (la légende est présente) mais échoue 11.7 (le texte n’est pas pertinent). Les deux critères s’évaluent séparément.
Comment auditer le critère RGAA 11.7 sur la légende de formulaire avec un lecteur d'écran ?
Avec NVDA, naviguez en mode formulaire (touche F pour activer, Tab pour parcourir les champs). À chaque entrée dans un groupe, NVDA annonce la légende. Vérifiez que cette annonce permet de comprendre la nature du groupe sans avoir à lire tous les champs. Sur VoiceOver (macOS), utilisez le rotor « Formulaires » (Ctrl+Option+U) pour lister les groupes avec leur légende.
Comment un titre HTML (<h2>, <h3>) placé avant un <fieldset> diffère-t-il d'une <legend> selon le RGAA ?
Non. Un titre HTML n’est pas techniquement associé au groupe : le critère 11.6 échouera d’abord. Pour réutiliser un titre existant, placez aria-labelledby sur le <fieldset> en pointant vers l’id du titre. Le texte du titre sera alors évalué pour le critère 11.7 dans ce contexte.
Comment utiliser aria-labelledby pour associer un titre visible à un groupe de champs de formulaire ?
Oui, c’est une approche recommandée pour éviter la duplication d’information. Si un <h2 id="adresse-titre">Adresse de livraison</h2> décrit déjà le groupe, <fieldset aria-labelledby="adresse-titre"> est conforme pour 11.6 et 11.7, à condition que le texte du titre soit pertinent au sens du critère 11.7.
Comment le critère RGAA 11.7 s'applique-t-il aux groupes de boutons radio avec role="radiogroup" ?
Oui. Un élément avec role="radiogroup" constitue un regroupement de champs de même nature au sens du RGAA. Sa légende, portée par aria-label ou aria-labelledby, est évaluée pour le critère 11.7. La technique ARIA17 des WCAG 2.1 illustre précisément ce cas d’usage avec des exemples de groupes de boutons radio en ARIA.