Chaque groupe de champs dans vos formulaires est-il accompagné d'un titre de groupe clairement rattaché ?
Critère officiel 11.6 — Dans chaque formulaire, chaque regroupement de champs de même nature a-t-il une légende ?
Pourquoi c'est important
Sans titre de groupe techniquement rattaché, le logiciel de lecture énumère les champs sans contexte. La personne aveugle doit mémoriser les étiquettes individuelles pour comprendre à quel ensemble elles appartiennent — comme lire une liste de questions sans savoir à quoi elle se rapporte.
Exemples concrets
Ce qui est conforme
Le groupe de champs « Coordonnées du référent légal » est annoncé par son titre avant les champs qui le composent. La personne aveugle sait d'emblée qu'elle renseigne les informations d'un parent ou tuteur, et non celles de l'enfant.
Ce qui pose problème
Ce même titre est affiché en gras au-dessus du groupe, mais non rattaché techniquement au groupe dans le code. Le logiciel de lecture le lit comme un paragraphe isolé, puis liste les champs sans établir de lien avec lui.
Comment agir
Transmettez systématiquement à votre prestataire le titre de chaque groupe lors de la conception d'un formulaire. Ce titre doit être intégré techniquement dans le groupe — pas simplement affiché en texte libre au-dessus. Posez la question directement : « Les titres de groupes sont-ils déclarés comme légendes de groupe dans le code ? »
Règles clés
- La <legend> doit décrire le groupe, pas les options individuelles.
- Elle doit être concise — elle est prononcée avant chaque option, une <legend> longue devient rapidement épuisante.
- Si la <legend> est visuellement redondante avec un titre adjacent, elle peut être visuellement masquée avec la classe sr-only (clip masking) — mais pas avec display:none ni visibility:hidden.
- Une <legend> masquée via sr-only reste accessible aux AT : c'est le bon compromis quand le design ne prévoit pas de titre de groupe visible.
Erreurs fréquentes
- <legend> vide ou contenant uniquement des espaces
- <legend> générique ('Champ', 'Options', 'Choix')
- <legend> qui répète le texte de tous les labels enfants
- <legend> masquée en CSS sans alternative accessible (display:none retire la legend des AT)
Exemples de code
legend vide
✗ Non conforme<fieldset>
<legend></legend>
<input type="radio" id="oui" name="accord"><label for="oui">Oui</label>
<input type="radio" id="non" name="accord"><label for="non">Non</label>
</fieldset>Legend vide : le lecteur d'écran annonce 'Groupe' sans contexte. L'utilisateur entend 'Oui, bouton radio, 1 sur 2' — sans savoir à quelle question 'Oui' répond.
legend pertinente
✓ Conforme<fieldset>
<legend>Acceptez-vous de recevoir nos communications ?</legend>
<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>
</fieldset>La legend répond précisément à la question que les options permettent d'y répondre. Annonce : 'Acceptez-vous de recevoir nos communications ?, groupe — Oui, bouton radio, 1 sur 2'.
legend masquée visuellement avec sr-only
✓ Conforme<!-- Quand un titre H2/H3 adjacent remplit déjà le rôle visuellement -->
<h2>Mode de paiement</h2>
<fieldset>
<legend class="sr-only">Mode de paiement</legend>
<div>
<input type="radio" id="cb" name="paiement" value="cb">
<label for="cb">Carte bancaire</label>
</div>
<div>
<input type="radio" id="vir" name="paiement" value="virement">
<label for="vir">Virement</label>
</div>
</fieldset>
/* sr-only : masquage visuel accessible */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}Le titre H2 visible évite la redondance visuelle. La legend sr-only conserve l'association programmatique pour les AT. Ne jamais utiliser display:none ou visibility:hidden sur une legend — cela la cache aussi aux AT.
Référence WCAG : 1.3.1, 3.3.2