Dans vos formulaires, les champs qui forment un ensemble logique sont-ils regroupés visuellement et sémantiquement ?
Critère officiel 11.5 — Dans chaque formulaire, les champs de même nature sont-ils regroupés, si nécessaire ?
Pourquoi c'est important
Un formulaire d'inscription aux activités périscolaires contient des champs sur l'enfant, sur les parents, sur les activités choisies et sur les préférences de contact. Sans regroupement, le logiciel de lecture annonce les champs les uns après les autres sans indiquer à quelle section ils appartiennent — comme une liste de 15 questions sans contexte.
Exemples concrets
Ce qui est conforme
Le formulaire est structuré en trois sections : « Identité de l'enfant », « Coordonnées des responsables légaux », « Activités choisies ». Le logiciel de lecture annonce le titre de chaque section avant ses champs. L'utilisateur sait toujours dans quel contexte il se trouve.
Ce qui pose problème
Le même formulaire présente 15 champs à la suite sans séparation. Le logiciel annonce : « Prénom. Nom. Date de naissance. Téléphone. Adresse. Activité 1. Activité 2… » — l'utilisateur ne sait plus si le téléphone est celui de l'enfant ou du parent.
Comment agir
Lors de la conception ou refonte d'un formulaire complexe, fournissez à votre prestataire un plan écrit avec les regroupements logiques : « Section 1 : Identité de l'enfant (prénom, nom, date de naissance) / Section 2 : Coordonnées famille (téléphone, email) / Section 3 : Choix des activités ». Le développeur l'implémentera avec les balises de regroupement appropriées.
Règles clés
- Tout groupe de boutons radio doit être dans un <fieldset> avec une <legend> décrivant la question ou la catégorie.
- Tout groupe de cases à cocher liées par un thème commun doit être dans un <fieldset> avec une <legend>.
- La <legend> doit être concise — elle est annoncée avant chaque option individuelle.
- Alternative ARIA valide : <div role="group" aria-labelledby="id-du-titre"> — mais préférer <fieldset>/<legend> pour la robustesse inter-AT.
- Un formulaire peut avoir plusieurs <fieldset> imbriqués pour des groupes dans des groupes.
Erreurs fréquentes
- Groupe de boutons radio sans <fieldset>/<legend> — chaque radio isolé sans contexte
- Groupe de cases à cocher sans <fieldset>/<legend>
- <legend> vide ou répétant le label de chaque champ sans ajouter de contexte
- Regroupement visuellement évident (titre au-dessus des radios) mais non programmatique
- Utilisation de <div role="group"> + aria-labelledby comme alternative — valide mais moins robuste que <fieldset>/<legend>
Exemples de code
radios sans fieldset
✗ Non conforme<p>Mode de livraison :</p>
<input type="radio" id="std" name="livraison" value="standard">
<label for="std">Standard (3-5 jours)</label>
<input type="radio" id="exp" name="livraison" value="express">
<label for="exp">Express (24h)</label>Le <p> 'Mode de livraison' n'est pas programmatiquement lié aux radios. Le lecteur d'écran annonce 'Standard, bouton radio' sans contexte de groupe.
radios avec fieldset/legend
✓ Conforme<fieldset>
<legend>Mode de livraison</legend>
<div>
<input type="radio" id="std" name="livraison" value="standard">
<label for="std">Standard (3-5 jours)</label>
</div>
<div>
<input type="radio" id="exp" name="livraison" value="express">
<label for="exp">Express (24h)</label>
</div>
</fieldset>Le lecteur d'écran annonce à l'entrée dans le groupe : 'Mode de livraison, groupe'. Puis pour chaque option : 'Standard (3-5 jours), bouton radio, 1 sur 2'.
checkboxes sans fieldset
✗ Non conforme<p>Vos centres d'intérêt :</p>
<input type="checkbox" id="sport" name="interet" value="sport">
<label for="sport">Sport</label>
<input type="checkbox" id="culture" name="interet" value="culture">
<label for="culture">Culture</label>Même problème qu'avec les radios : le contexte 'Vos centres d'intérêt' n'est pas associé programmatiquement aux cases à cocher.
checkboxes avec fieldset/legend
✓ Conforme<fieldset>
<legend>Vos centres d'intérêt</legend>
<div>
<input type="checkbox" id="sport" name="interet" value="sport">
<label for="sport">Sport</label>
</div>
<div>
<input type="checkbox" id="culture" name="interet" value="culture">
<label for="culture">Culture</label>
</div>
</fieldset>Chaque case à cocher est contextualisée par la legend : 'Vos centres d'intérêt, groupe — Sport, case à cocher, non cochée'.
Référence WCAG : 1.3.1, 3.3.2