Dans chaque formulaire, les champs de même nature sont-ils regroupés, si nécessaire ?
Un lecteur d’écran annonce « Madame », puis « Monsieur ». Sans conteneur sémantique, l’utilisateur ne sait pas que ces deux boutons radio concernent la civilité. Le regroupement fournit ce contexte manquant.
Ce critère s’applique dès que plusieurs champs partagent une logique commune : une série de cases à cocher sur un même thème, une date décomposée en jour/mois/année, un bloc coordonnées postales avec rue, code postal et ville. Si les libellés individuels ne permettent pas de comprendre le rôle de chaque champ sans voir la page, un conteneur sémantique est obligatoire.
Trois solutions sont valides : l’élément <fieldset> associé à une <legend> (solution HTML native, la plus robuste), un élément portant role="group" (ARIA, utile pour les champs composites comme une date ou un numéro de sécurité sociale), et role="radiogroup" pour les groupes de boutons radio implémentés en ARIA. Dans tous les cas, le groupe doit porter un intitulé pertinent — c’est l’objet du critère 11.6.
Un test pour vérifier le regroupement logique des champs liés
Regroupement des champs de même nature dans <fieldset> ou role=group
- Repérez dans le formulaire tous les groupes de champs de même nature : boutons radio sur un même sujet, cases à cocher liées, date décomposée en plusieurs champs, bloc adresse avec rue/code postal/ville, bloc identité avec nom/prénom.
- Pour chaque groupe identifié, vérifiez qu’un des conteneurs suivants est utilisé :
<fieldset>(HTML natif)- Un élément avec
role="group"(ARIA) - Un élément avec
role="radiogroup"ourole="group"si le groupe contient des<input type="radio">ou des éléments avecrole="radio"
- Si chaque groupe de même nature est bien encapsulé dans l’un de ces conteneurs, le test est validé.
Exemples
❌ Non conforme : Boutons radio sans regroupement sémantique
<form>
<p>Civilité</p>
<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>
</form>Le <p>Civilité</p> est du texte visuel, pas un conteneur sémantique. Un lecteur d’écran qui navigue champ par champ annonce « Madame, bouton radio » sans jamais mentionner « Civilité ». L’utilisateur perd complètement le contexte de la question posée.
✅ Conforme : Boutons radio dans un fieldset 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>Le <fieldset> crée un groupe sémantique. Un lecteur d’écran annonce « Civilité, groupe » à l’entrée du groupe, puis « Madame, bouton radio, 1 sur 2 ». Le contexte est complet. C’est l’implémentation recommandée pour tous les groupes de boutons radio.
✅ Conforme : Champ date composite avec role="group"
<div role="group" aria-labelledby="label-naissance">
<span id="label-naissance">Date de naissance</span>
<label for="jour">Jour</label>
<input type="text" id="jour" name="jour" size="2" maxlength="2">
<label for="mois">Mois</label>
<input type="text" id="mois" name="mois" size="2" maxlength="2">
<label for="annee">Année</label>
<input type="text" id="annee" name="annee" size="4" maxlength="4">
</div>Une date en trois champs texte n’est pas un groupe de boutons radio : role="group" avec aria-labelledby est ici la solution ARIA adaptée. Le lecteur d’écran annonce « Date de naissance, groupe » à l’entrée du conteneur, puis chaque champ avec son libellé individuel.
Astuces et pièges
⚠️ Le conteneur visuel n’est pas un conteneur sémantique
Entourer des champs avec un <div> ou un <section> — même stylé avec une bordure et un titre visible — ne crée aucun regroupement accessible. Les lecteurs d’écran ignorent ces éléments comme conteneurs de formulaire. Seuls <fieldset>, role="group" et role="radiogroup" sont reconnus. C’est l’erreur la plus fréquente en audit.
⚠️ L’attribut name commun ne crée pas de groupe sémantique
Des boutons radio partageant le même attribut name forment un groupe fonctionnel (un seul choix possible), mais ce lien n’est pas restitué par les lecteurs d’écran. L’attribut name est invisible à l’accessibilité. Un <fieldset> ou role="radiogroup" reste obligatoire.
💡 Préférer <fieldset> à role="group" quand c’est possible
<fieldset> est un élément HTML natif mieux supporté que role="group" dans les combinaisons navigateur/lecteur d’écran plus anciennes. Réservez role="group" aux cas où le marquage HTML natif n’est pas applicable, comme les composants JavaScript conçus avec des éléments non-<input>.
⚠️ Fieldsets imbriqués pour les formulaires complexes
Un formulaire d’inscription peut légitimement imbriquer des <fieldset> : un pour « Informations personnelles » contenant un sous-<fieldset> pour « Date de naissance ». C’est valide en HTML5 et pertinent dès que les niveaux de regroupement sont sémantiquement distincts.
⚠️ Ne pas confondre 11.5 (regroupement) et 11.6 (intitulé du groupe)
Le critère 11.5 vérifie l’existence du conteneur sémantique. Le critère 11.6 vérifie qu’il porte un intitulé pertinent (<legend>, aria-label ou aria-labelledby). Un <fieldset> sans <legend> peut valider le 11.5 tout en échouant au 11.6. Les deux critères sont liés mais distincts.
Questions fréquentes
Comment décider si des champs de formulaire doivent être regroupés selon le RGAA ?
Posez-vous cette question : si quelqu’un entend uniquement les libellés des champs sans voir la page, comprend-il le contexte ? « Jour », « Mois », « Année » sans contexte : impossible de savoir s’il s’agit d’une date de naissance ou d’une date d’expiration. « Madame », « Monsieur » sans contexte : aucune question visible. Dès ce doute, regroupez.
Quand utiliser role="radiogroup" plutôt que <fieldset> pour regrouper des cases à cocher ?
Non. role="radiogroup" est réservé aux boutons radio (<input type="radio"> ou role="radio"). Pour les cases à cocher, utilisez <fieldset> + <legend> ou un élément avec role="group". Appliquer role="radiogroup" à des checkboxes introduit une sémantique erronée que certains lecteurs d’écran restitueront incorrectement.
Comment tester le regroupement de champs de formulaire lors d'un audit RGAA 11.5 ?
Inspectez le DOM : repérez les <input type="radio">, <input type="checkbox"> et les champs composites (date, téléphone en plusieurs parties). Vérifiez qu’ils sont encapsulés dans un <fieldset>, [role="group"] ou [role="radiogroup"]. Complétez en naviguant au lecteur d’écran : le nom du groupe doit être annoncé à l’entrée du conteneur.
Quand le critère RGAA 11.5 sur le regroupement s'applique-t-il aux formulaires à champ unique ?
Non. Le critère 11.5 est conditionnel : « si nécessaire ». Un formulaire de recherche avec un champ texte et un bouton n’a pas besoin de <fieldset>. Le regroupement est requis uniquement quand il existe plusieurs champs de même nature formant un ensemble logique.
Comment utiliser <fieldset> pour structurer les sections d'un long formulaire en RGAA ?
Uniquement si les champs de la section sont de même nature et que leurs libellés individuels sont insuffisants sans contexte. Des champs « Nom » et « Prénom » sont auto-explicatifs : un <fieldset> n’est pas obligatoire. Des champs « Rue », « Code postal », « Ville » représentent une adresse : un <fieldset> avec la légende « Adresse de livraison » est pertinent.