Dans chaque formulaire, chaque regroupement de champs de même nature a-t-il une légende ?
Un utilisateur de lecteur d’écran navigue dans un formulaire et tombe sur un bouton radio intitulé « Madame ». Son lecteur annonce : « Madame, bouton radio, 1 sur 2 ». Sans légende de groupe, la question posée, « Quelle est votre civilité ? », reste silencieuse. Il doit naviguer dans la page pour reconstituer un contexte que la mise en page visuelle rend évident en un coup d’œil.
Le critère 11.6 impose qu’un regroupement de champs de même nature soit accompagné d’un nom accessible. Trois approches sont valides : un <fieldset> avec un <legend> (méthode native HTML, à privilégier), un élément portant role="group" ou role="radiogroup" avec un aria-label ou aria-labelledby, ou une alternative individuelle où chaque champ du groupe porte un title, aria-label, aria-labelledby ou aria-describedby identifiant son appartenance au groupe.
Les cas concernés sont les groupes de boutons radio (civilité, fréquence de contact), les cases à cocher de même famille (centres d’intérêt, autorisations), et les champs composites tels qu’une date fractionnée en trois <input> ou un IBAN découpé. Si les libellés individuels ne suffisent pas à comprendre la question posée, un regroupement avec légende est requis.
Pas de légende, pas de contexte.
Un test pour évaluer la pertinence des légendes de regroupement
Présence d'une légende sur chaque groupe de champs
- Repérez tous les groupes de champs de même nature dans le formulaire : boutons radio, cases à cocher liées, champs composites (date, téléphone, IBAN).
- Pour chaque groupe utilisant un
<fieldset>: vérifiez qu’il contient un<legend>non vide comme premier enfant direct. - Pour chaque groupe utilisant
role="group"ourole="radiogroup": vérifiez la présence d’unaria-labelouaria-labelledbysur l’élément de regroupement. - Si aucun élément de regroupement n’est utilisé, vérifiez que chaque champ du groupe possède individuellement un
title,aria-label,aria-labelledbyouaria-describedbyqui indique son appartenance au groupe. - Si toutes les conditions ci-dessus sont remplies pour chaque groupe identifié, le test est validé.
Exemples
❌ Non conforme : Groupe de boutons radio sans légende
<fieldset>
<input type="radio" id="mme" name="civilite" value="mme">
<label for="mme">Madame</label>
<input type="radio" id="m" name="civilite" value="m">
<label for="m">Monsieur</label>
</fieldset>Le <fieldset> est présent, mais l’absence de <legend> prive l’utilisateur du contexte de groupe. Le lecteur d’écran annonce « Madame, bouton radio » sans jamais mentionner la question sous-jacente. L’utilisateur ignore qu’il répond à une question sur la civilité.
✅ Conforme : Groupe de boutons radio avec <legend>
<fieldset>
<legend>Civilité</legend>
<input type="radio" id="mme" name="civilite" value="mme">
<label for="mme">Madame</label>
<input type="radio" id="m" name="civilite" value="m">
<label for="m">Monsieur</label>
</fieldset>La <legend> fournit le nom du groupe. Le lecteur d’écran annonce « Civilité, Madame, bouton radio, 1 sur 2 ». La question et la réponse sont liées sans ambiguïté, dès la première interaction.
❌ Non conforme : Groupe ARIA sans nom accessible
<div role="radiogroup">
<div>
<input type="radio" id="oui" name="accord" value="oui">
<label for="oui">Oui</label>
</div>
<div>
<input type="radio" id="non" name="accord" value="non">
<label for="non">Non</label>
</div>
</div>role="radiogroup" crée bien un groupe sémantique, mais sans aria-label ni aria-labelledby, ce groupe n’a pas de nom accessible. Le lecteur d’écran entre dans une zone de groupe sans titre. « Oui » et « Non » sont intelligibles en isolation, mais la question à laquelle ils répondent reste inconnue.
✅ Conforme : Groupe ARIA nommé avec aria-labelledby
<p id="accord-titre">Acceptez-vous les conditions générales ?</p>
<div role="radiogroup" aria-labelledby="accord-titre">
<div>
<input type="radio" id="oui" name="accord" value="oui">
<label for="oui">Oui</label>
</div>
<div>
<input type="radio" id="non" name="accord" value="non">
<label for="non">Non</label>
</div>
</div>aria-labelledby relie le groupe au texte de question déjà présent dans le DOM. Le lecteur d’écran annonce la question complète avant les options, sans duplication de contenu. Cette approche est utile quand le texte introductif est un paragraphe existant dans la page.
Astuces et pièges
⚠️ <legend> vide ou masquée avec display: none
Un <fieldset> avec <legend></legend> vide est non conforme, même si un titre visible se trouve juste au-dessus dans la page. De même, masquer la <legend> avec display:none ou visibility:hidden la supprime de l’arbre d’accessibilité. Pour une légende visuellement masquée mais accessible, utilisez une classe CSS de type visually-hidden, basée sur clip et position: absolute.
⚠️ Les champs composites : l’angle mort des audits
Les groupes de boutons radio sont souvent bien traités en audit. Les champs composites, eux, passent régulièrement à travers les mailles. Un champ de date découpé en trois <input> (jour, mois, année) forme un groupe de même nature : sans <fieldset> et <legend>, l’utilisateur naviguant champ par champ ne sait pas s’il saisit une date de naissance, une date d’expiration ou une date de début de contrat. C’est l’erreur la plus fréquente sur les formulaires de réservation et de paiement.
💡 role="radiogroup" vs role="group"
Utilisez role="radiogroup" uniquement pour les groupes de boutons radio. Pour tout autre regroupement (cases à cocher, champs texte composites), utilisez role="group". Certains lecteurs d’écran annoncent explicitement « groupe de boutons radio » avec le premier rôle, ce qui oriente l’utilisateur sur le type d’interaction attendu avant même qu’il navigue dans les options.
⚠️ Case à cocher unique : le regroupement n’est pas obligatoire
Une case à cocher seule avec un libellé explicite (« J’accepte les conditions générales d’utilisation ») n’a pas besoin de <fieldset>. Le regroupement n’est requis que lorsque plusieurs champs partagent une question commune que les libellés individuels ne transmettent pas seuls. Un <fieldset> inutile alourdit l’expérience sans apporter de valeur sémantique.
⚠️ Alternative individuelle par champ : conforme, mais à éviter
Le RGAA autorise de ne pas utiliser d’élément de regroupement si chaque champ porte individuellement un title, aria-label, aria-labelledby ou aria-describedby qui identifie son appartenance au groupe. Un <input> de date pourrait avoir aria-label="Jour de naissance" plutôt qu’un <legend>Date de naissance</legend>. Cette approche est conforme, mais le <fieldset> reste plus fiable, plus maintenable et mieux supporté par les combinaisons navigateur et lecteur d’écran.
Questions fréquentes
Quelle est la différence entre le critère 11.5 et le critère 11.6 ?
Le critère 11.5 vérifie que les champs de même nature sont bien regroupés (existence d’un <fieldset> ou d’un role="group"). Le critère 11.6 vérifie que ce regroupement possède un nom accessible (présence et contenu d’un <legend>, aria-label ou aria-labelledby). Un formulaire peut échouer sur 11.5 si aucun regroupement n’existe, et sur 11.6 si le regroupement existe mais n’est pas nommé. Les deux critères sont distincts et s’évaluent séparément.
Comment masquer la <legend> visuellement sans compromettre la conformité RGAA ?
Oui, à condition d’utiliser une technique CSS qui masque visuellement l’élément sans le retirer de l’arbre d’accessibilité. La classe Bootstrap visually-hidden (ou sr-only dans d’autres bibliothèques) utilise clip, position: absolute et overflow: hidden. En revanche, display:none, visibility:hidden et l’attribut HTML hidden suppriment l’élément pour les lecteurs d’écran — la légende devient inaccessible et le critère 11.6 échoue.
Pourquoi une <legend> reste-t-elle obligatoire même avec des libellés de boutons radio explicites ?
Dès lors qu’un <fieldset> ou un role="group" est utilisé, une légende est obligatoire. La règle est simple : si vous créez un groupe, nommez-le. Des libellés comme « Oui » et « Non » sont particulièrement ambigus sans contexte. Si aucun regroupement formel n’existe dans le code et que les libellés sont totalement auto-suffisants, la question de la légende ne se pose pas.
Comment auditer le critère 11.6 RGAA sur les légendes de regroupement en production ?
Dans les outils de développement, inspectez chaque <fieldset> et vérifiez que son premier enfant direct est un <legend> non vide. Pour les éléments ARIA, recherchez tous les attributs role="group" et role="radiogroup" et contrôlez la présence de aria-label ou aria-labelledby. La requête CSS fieldset:not(:has(> legend)) dans la console identifie immédiatement les groupes sans légende.
Quelle position la <legend> doit-elle occuper dans la structure d'un <fieldset> RGAA ?
Selon la spécification HTML, oui. La <legend> doit être le premier enfant direct du <fieldset>. Certains navigateurs tolèrent une position différente, mais le comportement des lecteurs d’écran n’est pas garanti hors de cette position. Placez toujours la <legend> en premier pour une compatibilité maximale avec les technologies d’assistance.