7.2.1. Regrouper et titrer les champs de même nature avec <fieldset> et <legend>

Lorsqu’un formulaire propose plusieurs groupes de champs, dont certains ont des intitulés identiques, utiliser les balises <fieldset> et <legend>.

Par exemple :

<fieldset>
    <legend>Participant 1</legend>
 
    <label for="prenom-1">Prénom</label>
    <input type="text" id="prenom-1" name="prenom-1" />
 
    <label for="nom-1">Nom</label>
    <input type="text" id="nom-1" name="nom-1" />
 
    […]
</fieldset>
 
<fieldset>
    <legend>Participant 2</legend>
 
    <label for="prenom-2">Prénom</label>
    <input type="text" id="prenom-2" name="prenom-2" />
 
    <label for="nom-2">Nom</label>
    <input type="text" id="nom-2" name="nom-2" />
 
    […]
</fieldset>

Attention

Les balises <fieldset> et <legend> ne sont à utiliser que lorsque plusieurs groupes de champs disposent d’intitulés identiques. Par exemple :

Une série de questions sur une même page avec comme réponses possibles “oui” ou “non”.
Une liste de participants à un évènement avec, à chaque fois, “nom” et “prénom”.

Dans toutes les autres situations :

Ne pas utiliser les balises <fieldset> et <legend>.
Utiliser les balises <h1> à <h6> pour titrer les blocs.

Remarque

Une bonne pratique d’accessibilité consiste à utiliser également les balises <fieldset> et <legend> lors de l’intégration de listes de boutons radio ou de cases à cocher dans la page.

Par exemple :

<fieldset>
    <legend>Civilité</legend>
    <ul>
        <li>
            <label for="madame">
                <input id ="madame" type="radio" name="civilite" value="Mme" />
                Madame
            </label>
        </li>
        <li>
            <label for="monsieur">
                <input id ="monsieur" type="radio" name="civilite" value="M." />
                Monsieur
            </label>
        </li>
    </ul>
</fieldset>

Exemples

<h1>Réservez votre voyage</h1>
 
<h2>Train</h2>
<p>Réservez en une seule fois et économisez !</p>
[…]
 
<h3>Où et quand souhaitez-vous partir ?</h3>
[…]
 
<h3>Qui participe à ce voyage</h3>
[…]
 
<fieldset>
     <legend>Voyageur 1</legend>
     […]
</fieldset>
 
<fieldset>
     <legend>Voyageur 2</legend>
     […]
</fieldset>
 
[…]

Dans cet exemple, les textes “Réservez votre voyage”, “Train”, “Où et quand souhaitez-vous partir ?” et “Qui participe à ce voyage” peuvent être structurés avec des balises de titres.
Les textes “Voyageur 1” et “Voyageur 2” doivent par contre être structurés avec <fieldset> et <legend> ; ces derniers titrant des intitulés de champs identiques (“Passager”, “Carte et abonnement” et “Programme de fidélité”).

Recommandations associées

Recommandation précédente : 7.1.2. Intégrer les informations utiles à la saisie directement dans les balises <label>
Recommandation suivante : 7.2.2. Ordonner les options de manière logique dans les listes déroulantes