4.1.4 Les champs de formulaires liés sont regroupés par un <fieldset>

Lorsqu'un formulaire contient des groupes de champs liés, il faut les encadrer par les balises <fieldset> et </fieldset> et utiliser l'élément legend pour la décrire le groupe de champs.

Pourquoi?

Le but de cette directive est d'augmenter la qualité sémantique des formulaires. Cela permet aux utilisateurs de mieux comprendre le lien entre les champs et donc d'interagir de manière plus efficace et rapide avec le formulaire. En mode formulaire, un utilisateur de lecteur d'écran tabule de champ en champ. Pour chaque champ le contenu du label sera lu, ainsi que le contenu de l'élément legend si le champ fait partie d'un fieldset.

En pratique

Déterminez si votre formulaire contient des champs à regrouper logiquement.C'est lke cas si le formulaire comporte plusieurs champs avec le même label, ou s'il y a des champs dont le label n'est pas suffisemment clair par lui-même.

Pour regrouper les champs de formulaire, encadrez les groupes de champs par les balises <fieldset> et </fieldset> et utilisez l'élément legend pour donner à chaque groupe une description claire

Exemple

Champs regroupés logiquement

SI les labels des champs 'jour', 'mois, et 'année' sont lus hors contexte, on sait qu'il s'agit d'une date, mais pas de laquelle. C'est pourquoi il est utile d'ajouter un fieldset avec legend:

<fieldset>

	<legend>Date de naissance</legend>
	<label for="jour">Jour</label>
	<select id="jour" name="jour">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	</select>
	
	<label for="mois">Mois</label>
	<select id="mois" name="mois">
	<option>janvier</option>
	<option>février</option>
	<option>mars</option>
	</select>
	
	<label for="an">Année</label>
	<select id="an" name="an">
	<option>1980</option>
	<option>1981</option>
	<option>1982</option>
	</select>
	
</fieldset>

Champs répétés

Ci-dessous, les questions à choix multiples ont les mêmes réponses possibles. Il faut donc les placer dans un fieldset pour faire le lien avec la question correspondante. Il en va de même pour les informations personnelles qui sont répétées deux fois dans le formaire:

<fieldset>
	<legend>Vous lisez le journal</legend>
	<input type="radio" name="journal" value="d" id="j1" />
	<label for="j1">Tous les jours</label>
	<input type="radio" name="journal" value="w" id="s1" />
	<label for="s1">Toutes les semaines</label>
	<input type="radio" name="journal" value="m" id="m1" />
	<label for="m1">Tous les mois</label>
</fieldset>
	
<fieldset>
	<legend>Vous écoutez la radio</legend>
	<input type="radio" name="radio" value="d" id="j2" />
	<label for="j2">Tous les jours</label>
	<input type="radio" name="radio" value="w" id="s2" />
	<label for="s2">Toutes les semaines</label>
	<input type="radio" name="radio" value="m" id="m2" />
	<label for="m2">Tous les mois</label>
</fieldset>
	

<fieldset>
    <legend>Vos données</legend>
    <label for="nom01">nom</label>
    <input type="text" title="votre nom" name="nom01" id="nom01" />
    <label for="prénom01">prénom</label>
    <input type="text" title="Votre prénom" name="prénom01" id="prénom01" /> 
    <input type="checkbox" title="Etes-vous végétarien?" name="veggy01" id="veggy01" />
    <label for="veggy01">Végétarien?</label></p>
</fieldset>

<fieldset>
    <legend>Données de votre partenaire</legend>
    <label for="nom02">nom</label>
    <input type="text" title="Votre nom" name="nom02" id="nom02" />
    <label for="prénom02">prénom</label>
    <input type="text" title="Votre prénom" name="prénom02" id="prénom02" />
    <input type="checkbox" title=""Etes-vous végétarien?" name="veggy02" id="veggy02" />
    <label for="veggy02">Végétarien?</label></p>
</fieldset>

Remarques

Les éléments fieldset peuvent être imbriqués, mais au delà de deux niveaux cela peut mener à confusion. Essaiez de vous limiter à deux niveaux.

De même évitez des textes trop longs dans l'élément legend puisque ce texte sera répété par le lecteur d'écran pour chaque champ du fieldset.