Regroupement de champs de formulaire

Le regroupement de champs de formulaire consiste à associer des contrôles liés entre eux dans le code HTML, via les éléments fieldset et legend. Ce regroupement sémantique permet aux lecteurs d'écran d'annoncer le contexte commun des champs (par exemple, « Adresse de livraison ») avant chaque champ du groupe. Sans lui, des labels identiques comme « Prénom » ou « Code postal » deviennent ambigus.

Un formulaire de réservation demande les coordonnées de deux voyageurs. Chaque section contient un champ « Prénom » et un champ « Nom ». Un utilisateur de lecteur d'écran arrive au deuxième « Prénom » : impossible de savoir s'il concerne le voyageur 1 ou le voyageur 2. Le regroupement de champs résout cette ambiguïté en associant les contrôles liés dans le code HTML.

#Comment regrouper des champs

Les éléments <fieldset> et <legend> forment le mécanisme natif. Le <fieldset> délimite le groupe, le <legend> lui donne un titre. Les lecteurs d'écran annoncent ce titre avant chaque champ du groupe.

<fieldset>
  <legend>Voyageur 1</legend>
  <label for="prenom-1">Prénom</label>
  <input id="prenom-1" type="text">
  <label for="nom-1">Nom</label>
  <input id="nom-1" type="text">
</fieldset>

Le tutoriel Forms du W3C WAI et la technique H71 décrivent cette approche. Elle satisfait le critère WCAG 1.3.1 Info and Relationships (niveau A). Le RGAA reprend cette exigence dans ses critères 11.5 et 11.6 : les champs de même nature doivent être regroupés, et la légende doit être pertinente.

Détail que beaucoup ignorent : le <legend> doit être le premier enfant du <fieldset>. Placé ailleurs, certains lecteurs d'écran ne le restituent pas.

Tous les groupes de champs ne nécessitent pas un <fieldset>. Les boutons radio et les cases à cocher l'exigent systématiquement. Pour les champs texte, AcceDe Web recommande le regroupement quand des labels identiques apparaissent dans plusieurs sections du formulaire.

Le style natif du <fieldset> (bordure, padding) complique parfois la mise en page. L'alternative : role="group" avec aria-labelledby, documentée sur MDN. HTML natif d'abord, ARIA en recours.

#Les deux erreurs classiques

Ne pas regrouper les boutons radio. Le cas le plus fréquent. Sans <fieldset>, un lecteur d'écran annonce « Oui, bouton radio » sans contexte. L'utilisateur ne sait pas à quelle question il répond.

<!-- ❌ Le lecteur d'écran dit « Oui » sans contexte -->
<label><input type="radio" name="conditions"> Oui</label>
<label><input type="radio" name="conditions"> Non</label>
 
<!-- ✅ Le lecteur d'écran dit « Acceptez-vous les CGV ? Oui » -->
<fieldset>
  <legend>Acceptez-vous les CGV ?</legend>
  <label><input type="radio" name="conditions"> Oui</label>
  <label><input type="radio" name="conditions"> Non</label>
</fieldset>

Englober tout le formulaire dans un seul <fieldset>. Un groupe unique qui contient tous les champs n'apporte aucune information. Le regroupement n'a de sens que pour distinguer des sous-ensembles, comme les coordonnées et l'adresse de livraison.

#En résumé

Utilisez <fieldset> et <legend> dès que des champs partagent un contexte commun, et systématiquement pour les boutons radio et les cases à cocher. Le <legend> va en premier enfant, toujours. Si le formulaire ne contient qu'un seul groupe logique, le regroupement n'est pas nécessaire.