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>
Les balises <fieldset>
et <legend>
ne sont à utiliser que lorsque plusieurs groupes de champs disposent d’intitulés identiques. Par exemple :
Dans toutes les autres situations :
<fieldset>
et <legend>
.<h1>
à <h6>
pour titrer les blocs.
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>
<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é”).