Générateur de fieldset et legend

<fieldset>
	<legend>Mode de livraison (obligatoire)</legend>
	<div>
		<input type="radio" id="livraison-1" name="livraison" value="livraison-a-domicile" required>
		<label for="livraison-1">Livraison à domicile</label>
	</div>
	<div>
		<input type="radio" id="livraison-2" name="livraison" value="point-relais" required>
		<label for="livraison-2">Point relais</label>
	</div>
	<div>
		<input type="radio" id="livraison-3" name="livraison" value="retrait-en-magasin" required>
		<label for="livraison-3">Retrait en magasin</label>
	</div>
</fieldset>

Ce que demandent les critères 11.5 et 11.6

Le critère 11.5 du RGAA 4.1.2 demande que les champs de même nature soient regroupés, si nécessaire. Son test accepte trois balisages : un élément <fieldset>, un élément avec role="group", et, pour des boutons radio, un élément avec role="radiogroup".

Le critère 11.6 demande une légende à chaque regroupement : un <legend> dans le fieldset, ou un attribut aria-label ou aria-labelledby sur l’élément qui porte le rôle. Le critère 11.7 demande ensuite que cette légende soit pertinente : c’est la seule partie qu’un générateur ne peut pas vérifier.

Quand regrouper des champs

Le glossaire du RGAA définit les champs de même nature comme ceux qui doivent être traités comme un ensemble. Ses exemples : une date en trois champs, un numéro de téléphone en plusieurs champs, un bloc d’identité et d’adresse quand le formulaire en contient plusieurs, des boutons radio ou des cases à cocher qui répondent à une même question.

Le regroupement devient nécessaire quand l’étiquette seule ne dit pas à quoi sert le champ. « Oui » ne veut rien dire sans la question ; « Code postal » est ambigu quand la page demande une adresse de livraison et une adresse de facturation. À l’inverse, la définition de la légende précise qu’un formulaire fait d’un seul bloc d’informations, ou d’un champ unique comme un moteur de recherche, n’a pas besoin de regroupement. Elle admet aussi de porter l’information dans l’étiquette de chaque champ, par exemple « Code postal de livraison », sans regroupement.

Ce que le fieldset apporte

Selon la spécification HTML, un fieldset regroupe des champs, et le premier legend placé directement dedans lui sert de titre. Le calcul du nom accessible en fait le nom du groupe que reçoivent les technologies d’assistance. La technique H71 des WCAG indique que les navigateurs présentent souvent la légende avant l’étiquette de chaque champ : gardez-la courte, elle se répète.

Un attribut disabled posé sur le fieldset désactive tous les champs qu’il contient, hors de la légende. La légende peut contenir un titre, par exemple <legend><h2>Adresse de livraison</h2></legend> : la spécification de legend autorise du contenu de phrase mêlé de titres.

La version ARIA, et quand la choisir

Le RGAA valide aussi un <div role="group"> nommé par aria-labelledby, qui pointe vers un texte visible faisant office de légende. La technique ARIA17 demande role="radiogroup" pour des boutons radio : le générateur le pose de lui-même. Elle précise que ce n’est pas fait pour envelopper tous les champs d’un formulaire dans un seul groupe.

Les deux versions passent les critères 11.5 et 11.6. La première règle d’usage d’ARIA du W3C demande pourtant de préférer l’élément HTML natif quand il fait ce qu’on attend, ce qui est le cas ici. Gardez la version ARIA pour un conteneur qui ne peut pas devenir un fieldset, par exemple un composant imposé par une bibliothèque.

Groupe obligatoire

Le critère 11.10 demande une indication visible du caractère obligatoire avant l’envoi du formulaire. Pour un champ de saisie, le générateur l’écrit dans l’étiquette et pose required. Pour un groupe de choix, il l’écrit dans la légende : le RGAA cite d’ailleurs la légende d’un groupe comme l’emplacement de la mention « facultatif ».

• Boutons radio : selon la spécification HTML, un seul bouton marqué required rend tout le groupe obligatoire. Le générateur le pose sur chacun : l’effet est le même, et le code se lit mieux.
• Cases à cocher : required rendrait chaque case obligatoire. La règle « au moins un choix » se contrôle donc à l’envoi, avec un message d’erreur qui nomme le groupe (test 11.10.3).
• Champs de saisie : écrivez « (facultatif) » dans le libellé d’un champ pour que le générateur ne le rende pas obligatoire, comme un complément d’adresse.

Aide commune et autocomplete

Une consigne qui vaut pour tout le groupe, comme un format de date, est placée sous la légende et reliée à chaque champ par aria-describedby. Le glossaire du RGAA décrit ce passage de texte lié : une liste d’id uniques dans la page. La légende reste courte, l’aide est restituée avec chaque champ.

Pour un champ de saisie, écrivez après une barre verticale la valeur autocomplete : Code postal | postal-code. Le générateur accepte les valeurs d’identité, d’adresse, de date de naissance et de contact de la liste du RGAA : chacune peut être précédée de shipping (livraison) ou billing (facturation), comme le prévoient les notes techniques du critère 11.13. Ce critère ne les exige que pour les champs qui portent sur la personne qui remplit le formulaire.

Le type du champ suit les groupes de contrôles de la spécification HTML : type="email" pour email, type="url" pour url et type="tel" pour le seul numéro complet, tel. Un morceau de numéro, comme tel-national ou tel-country-code, reste un champ texte, avec inputmode="tel" pour afficher le clavier téléphonique.

Mise en forme

Le code produit ne contient aucun style. La bordure d’un fieldset et la position de sa légende se changent en CSS sans toucher au rôle ni au nom du groupe. La technique H71 conseille de garder un regroupement visible, et d’éviter les fieldsets imbriqués quand ce n’est pas nécessaire.

Sources

RGAA 4.1.2, critère 11.5 (regroupement des champs de même nature) ; RGAA 4.1.2, critère 11.6 (légende des regroupements) ; RGAA 4.1.2, critère 11.7 (pertinence des légendes) ; RGAA 4.1.2, critère 11.10 (indication des champs obligatoires) ; RGAA 4.1.2, critère 11.13 (autocomplete des champs sur l’utilisateur) ; RGAA 4.1.2, glossaire : Champs de même nature ; RGAA 4.1.2, glossaire : Légende ; RGAA 4.1.2, glossaire : Passage de texte lié par aria-labelledby ou aria-describedby ; RGAA 4.1.2, glossaire : Liste des valeurs possibles pour l’attribut autocomplete ; HTML Living Standard, l’élément fieldset, en anglais ; HTML Living Standard, l’élément legend, en anglais ; HTML Living Standard, boutons radio et champs obligatoires, en anglais ; HTML Living Standard, remplissage automatique et groupes de contrôles, en anglais ; WCAG 2.1, technique H71 : fieldset et legend, en anglais ; WCAG 2.1, technique ARIA17 : rôles de regroupement, en anglais ; W3C, Using ARIA : première règle d’usage, en anglais ; W3C, HTML Accessibility API Mappings : nom accessible du fieldset, en anglais .

Page mise à jour le 11 novembre 2026.