Légendes de fieldset

Silktide vérifie que chaque groupe de champs de formulaire déclaré avec un fieldset comporte également une légende décrivant l'objectif du groupe. La légende donne un nom à l'ensemble du groupe, de sorte que chaque option soit entendue dans son contexte.

En , l'élément <fieldset> regroupe des contrôles de formulaire liés — un ensemble de boutons radio, de cases à cocher ou de champs d'adresse — et l'élément <legend> en est l'intitulé.

<!-- Problème : le groupe n'a pas de légende -->
<fieldset>
  <label><input type=\"radio\" name=\"size\" value=\"s\"> Petit</label>
  <label><input type=\"radio\" name=\"size\" value=\"l\"> Grand</label>
</fieldset>

Pourquoi c'est important

Un visiteur voyant voit l'intitulé du groupe juste au-dessus des options. Un utilisateur de entend chaque option séparément et, sans légende, n'entend que « Petit » et « Grand » sans indication de ce qui est choisi. La légende est annoncée lorsque l'utilisateur entre dans le groupe, de sorte que des indications comme « Taille du T-shirt » parviennent à tout le monde.

Comment corriger

Ajoutez un <legend> comme premier élément à l'intérieur de chaque <fieldset>, en décrivant le groupe en quelques mots :

<!-- Corrigé : la légende nomme le groupe -->
<fieldset>
  <legend>Taille du T-shirt</legend>
  <label><input type=\"radio\" name=\"size\" value=\"s\"> Petit</label>
  <label><input type=\"radio\" name=\"size\" value=\"l\"> Grand</label>
</fieldset>

Gardez les légendes courtes — les lecteurs d'écran peuvent répéter la légende pour chaque champ du groupe.

Comment Silktide teste cela

Trouver chaque élément <fieldset> sur chaque page.
Signaler chaque <fieldset> qui n'a pas d'élément <legend> en enfant direct.

Dépannage

Ma légende existe mais est tout de même signalée

Le <legend> doit être un enfant direct du <fieldset>. Un intitulé imbriqué dans un autre élément, tel qu'un conteneur <div>, n'est pas reconnu comme la légende du groupe — ni par ce contrôle ni par les .