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 le 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 suffisamment 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:

Screenshot

chmaps date de naissance avec champs jour, mois année (code ci-dessous)

<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>fevrier</option> 
 <option>mars</option> 
</select>  

<label for="an">Annee</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 formulaire:

Screenshot

screenshot

<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 ecoutez 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> 

Remarques

Les éléments fieldset peuvent être imbriqués, mais au-delà de deux niveaux cela peut mener à confusion. Essayez 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.

comment tester

Pour voir rapidement si des éléments fieldset sont utilisés dans un formulaire, désactivez les feuilles de style: les fieldsets seront alors montrés comme des cadres autour des champs qu'ils contiennent.

Vérifiez que les fieldsets sont utilisés dans les cas suivants:

  • Lorsque les labels des champs ne suffisent pas à les décrire. Dans ces cas-là, en général on trouvera un titre ou un paragraphe qui spécifie le contenu des champs.
  • Lorsque le même groupe de champs doit être rempli plus d'une fois. Par exemple lorsqu'il faut spécifier une adresse de livraison et une adresse de facturation ou le nom et la date de naissance de deux personnes.