Champs de même nature non regroupés : fieldset RGAA 11.5

Q: Faut-il un fieldset pour chaque paire label/input ?

Non. Le <fieldset> sert uniquement à regrouper des champs de même nature qui forment ensemble une question. Un champ isolé (nom, email) n'a pas besoin de fieldset : son <label> suffit.

Q: Le fieldset change-t-il l'apparence du formulaire ?

Par défaut, les navigateurs affichent un <fieldset> avec une bordure grise. Tu peux la supprimer en CSS : fieldset { border: none; padding: 0; margin: 0; } . La structure sémantique reste intacte.

C'est quoi

Le critère RGAA 11.5 exige que les champs de même nature soient regroupés quand ce regroupement est nécessaire à la compréhension du formulaire. Le test 11.5.1 attend un <fieldset> avec une <legend> pertinente, ou son équivalent ARIA (role="radiogroup" pour les boutons radio, role="group" pour les cases à cocher, avec un libellé accessible).

Les cas où le regroupement est nécessaire :

Plusieurs boutons radio proposant des options exclusives (civilité, mode de livraison, fréquence).
Plusieurs cases à cocher formant une liste d'options (centres d'intérêt, jours disponibles).
Des champs distincts qui composent une même information (jour / mois / année d'une date de naissance).

La <legend> joue le rôle de question ou de titre du groupe. Elle est annoncée par le lecteur d'écran avant chaque option : "Mode de livraison - Livraison express".

Ce critère correspond à WCAG 1.3.1 (Information et relations, niveau A).

Qui est touché

Les personnes aveugles utilisant un lecteur d'écran : sans <fieldset>, elles entendent "Livraison express, bouton radio" sans savoir à quelle question cette option répond. Avec le fieldset, elles entendent "Mode de livraison - Livraison express, bouton radio".
Les personnes avec des troubles cognitifs : le contexte apporté par la légende du groupe réduit la charge mentale et le risque de mauvaise sélection.

Impact business

Sans fieldset, un groupe de boutons radio ou de cases à cocher perd son contexte. L'utilisateur de lecteur d'écran navigue parmi des options sans savoir à quoi elles correspondent. Sur un formulaire de commande avec plusieurs groupes (livraison, paiement, abonnement newsletter), la confusion est rapide.

Ce type d'erreur est fréquent dans les formulaires construits avec des constructeurs de pages (Elementor, Divi, Bricks) qui n'utilisent pas toujours les balises sémantiques HTML par défaut.

Sources des chiffres

Comment le détecter

Audit Mynto : le scan détecte les groupes de boutons radio ou de cases à cocher non encadrés par un <fieldset>.
Manuel : inspecte le HTML de chaque formulaire. Cherche les <input type="radio"> et <input type="checkbox">. S'ils ne sont pas dans un <fieldset>, vérifie si leur regroupement est nécessaire au sens du critère.
Lecteur d'écran : navigue dans le formulaire et écoute si la question du groupe est annoncée avant chaque option.

Comment corriger

Avant - HTML

<!-- Boutons radio sans fieldset -->
<p>Mode de livraison</p>
<input type="radio" id="std" name="livraison" value="standard">
<label for="std">Livraison standard</label>
<input type="radio" id="exp" name="livraison" value="express">
<label for="exp">Livraison express</label>

Après - HTML

<!-- Boutons radio regroupés dans un fieldset -->
<fieldset>
  <legend>Mode de livraison</legend>
  <input type="radio" id="std" name="livraison" value="standard">
  <label for="std">Livraison standard</label>
  <input type="radio" id="exp" name="livraison" value="express">
  <label for="exp">Livraison express</label>
</fieldset>

Entoure chaque groupe de boutons radio ou de cases à cocher liés d'un <fieldset>. Ajoute une <legend> qui sert de question ou de titre du groupe.

La <legend> doit être pertinente : "Mode de livraison", "Centres d'intérêt", "Jours de disponibilité". Évite "Choisissez" ou "Options" seuls.

Si tu veux masquer visuellement la <legend> (parce que le titre est déjà visible autrement sur la page), utilise une classe sr-only : le lecteur d'écran l'annoncera quand même.

Sur WordPress, les plugins de formulaire (Gravity Forms, WPForms) génèrent automatiquement le <fieldset> pour les champs "Radio Buttons" et "Checkboxes" si la fonctionnalité n'est pas désactivée dans les paramètres de style. Vérifie que les thèmes personnalisés n'écrasent pas le HTML généré par le plugin.

Questions fréquentes

Faut-il un fieldset pour chaque paire label/input ?

Non. Le <fieldset> sert uniquement à regrouper des champs de même nature qui forment ensemble une question. Un champ isolé (nom, email) n'a pas besoin de fieldset : son <label> suffit.

Peut-on remplacer fieldset/legend par du ARIA ?

Techniquement oui, et c'est d'ailleurs accepté par le test RGAA 11.5.1. Pour un groupe de boutons radio, utilise role="radiogroup" avec aria-labelledby ou aria-label. Pour des cases à cocher ou un groupe générique, utilise role="group". Mais les balises HTML5 natives (<fieldset> + <legend>) restent mieux supportées par tous les lecteurs d'écran. Préfère les balises natives.

Le fieldset change-t-il l'apparence du formulaire ?

Par défaut, les navigateurs affichent un <fieldset> avec une bordure grise. Tu peux la supprimer en CSS : fieldset { border: none; padding: 0; margin: 0; }. La structure sémantique reste intacte.

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.

Champs de même nature non regroupés (fieldset manquant)