Composant accessible · outil gratuit
Groupe de champs accessible (fieldset et legend) : radios, cases, adresse
Des champs qui vont ensemble (boutons radio d'une même question, cases à cocher, champs d'une adresse) se regroupent dans un <fieldset> dont la <legend> dit ce qu'on demande. Le lecteur d'écran annonce alors la question avec chaque choix. Les boutons radio d'un groupe partagent le même attribut name.
Critères RGAA 4.1.2 : 11.5, 11.6, 11.7, 11.1, 11.10, 11.13, 7.3 · WCAG 2.2 : 1.3.1, 1.3.5, 3.3.2, 4.1.2 · mis à jour le .
Générer et vérifier le composant
Réglez le composant : le code se met à jour, l'aperçu fonctionne pour de vrai, et chaque version est vérifiée en direct par les contrôles du composant, un test de comportement et axe-core. « Introduire une erreur fréquente » montre ce que chaque contrôle détecte ; « Tester mon code » vérifie le vôtre.
Réglages
Pour voir le contrôle qui la détecte (les erreurs de comportement apparaissent avec « Tester le comportement »).
<fieldset class="groupe">
<legend>Mode de livraison<span class="obligatoire"> (obligatoire)</span></legend>
<div class="choix">
<input type="radio" id="mode-de-livraison-1" name="mode-de-livraison" value="a-domicile" required>
<label for="mode-de-livraison-1">À domicile</label>
</div>
<div class="choix">
<input type="radio" id="mode-de-livraison-2" name="mode-de-livraison" value="en-point-relais">
<label for="mode-de-livraison-2">En point relais</label>
</div>
<div class="choix">
<input type="radio" id="mode-de-livraison-3" name="mode-de-livraison" value="retrait-en-magasin">
<label for="mode-de-livraison-3">Retrait en magasin</label>
</div>
</fieldset>Aperçu réel (utilisable à la souris et au clavier)
Vérification en direct
Qui est gêné quand le composant est mal fait
- Personnes aveugles : sans légende, elles entendent « Oui », « Non » sans savoir à quelle question ils répondent.
- Personnes qui naviguent au clavier : des boutons radio sans name commun obligent à tabuler sur chaque choix, et plusieurs choix peuvent être cochés par erreur.
- Personnes ayant des troubles cognitifs : une question clairement posée, avec ses choix groupés visuellement, se comprend d'un coup d'œil.
Le comportement attendu
Au clavier
| Touche ou moment | Ce qui doit se passer |
|---|---|
| Tab | Entre dans un groupe de boutons radio une seule fois (sur le choix coché, ou le premier), puis passe au champ suivant. |
| Flèches | Passent d'un bouton radio à l'autre et le cochent. |
| Espace | Coche ou décoche une case à cocher ; coche le bouton radio qui a le focus. |
Avec un lecteur d'écran
- En entrant dans le groupe, le lecteur d'écran annonce la légende (« Mode de livraison, groupe »), puis le choix : « À domicile, bouton radio, 1 sur 3 ».
- Sans fieldset ni legend, chaque choix est annoncé seul : « Par e-mail, case à cocher », sans la question.
Les erreurs les plus fréquentes
- Une question en simple paragraphe. Le texte de la question est au-dessus des choix, mais pas dans une <legend> : il n'est pas annoncé avec eux.
- Des radios sans name commun. Chaque bouton est un groupe à lui seul : on peut tout cocher, et les flèches ne fonctionnent plus.
- Des étiquettes non reliées. Cliquer sur le texte d'un choix ne le coche pas, et le lecteur d'écran n'en lit pas le nom.
- Une légende vague. « Choix » ou « Informations » : elle doit dire la question (critère 11.7).
- Une adresse sans autocomplete. La personne retape une adresse que son navigateur connaît déjà (critère 11.13).
Tester soi-même
- Avec Tab, entrez dans le groupe de boutons radio : une seule étape doit suffire ; les flèches changent le choix.
- Cliquez sur le texte d'un choix : il doit se cocher.
- Avec un lecteur d'écran, vérifiez que la légende est annoncée en entrant dans le groupe.
- Relisez la légende : elle doit dire clairement la question posée (jugement humain, critère 11.7).
Ce qu'Accessia détecte dans un audit
Dans un audit, Accessia signale les champs sans nom accessible (critère 11.1) et repère les regroupements de champs (fieldset, role="group" ou "radiogroup") : quand une page n'en contient aucun, il propose les critères 11.6 et 11.7 comme non applicables. Le besoin d'un regroupement (11.5) et la pertinence de la légende (11.7) se vérifient à la main.
Auditer une page gratuitement, ou vérifiez ce composant directement dans votre éditeur de code avec le serveur MCP d'Accessia.
Critères RGAA concernés
- Critère 11.5 : Regroupement des champs de même nature
- Critère 11.6 : Légende des groupes de champs
- Critère 11.7 : Pertinence des légendes
- Critère 11.1 : Étiquette des champs de formulaire
- Critère 11.10 : Contrôle de saisie et erreurs
- Critère 11.13 : Remplissage automatique des champs
- Critère 7.3 : Scripts utilisables au clavier
Questions fréquentes
Faut-il un fieldset pour deux champs « Prénom » et « Nom » ?
Ce n'est pas obligatoire si chaque étiquette suffit seule. Le regroupement devient nécessaire quand les champs n'ont de sens qu'ensemble : choix d'une question, date en trois listes, adresse.
fieldset ou role="group" ?
fieldset et legend d'abord : natifs, bien restitués, sans script. role="group" (ou radiogroup) avec aria-labelledby sert quand la structure HTML ne le permet pas.
La légende peut-elle être masquée ?
Elle peut être visuellement masquée si la question est déjà affichée autrement, mais une légende visible profite à tout le monde.
Ce code rend-il mon formulaire conforme ?
Il rend ce groupe conforme aux contrôles affichés. La pertinence de la légende et des étiquettes reste à juger.