Légendes des groupes de champs

Silktide vérifie que chaque groupe de champs de formulaire déclaré avec un fieldset comprend aussi une légende qui décrit l’objet du groupe. La légende donne un nom à l’ensemble du groupe, de sorte que chaque option est entendue dans son contexte.

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

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

Pourquoi c’est important

Une personne voyante voit la légende du groupe juste au-dessus des options. Un utilisateur de entend chaque option une par une et, sans légende, n’entend que « Small » et « Large » sans indication de ce qui est choisi. La légende est annoncée lorsqu’on entre dans le groupe, de sorte que des consignes comme « Taille de T-shirt » soient comprises par 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 de T-shirt</legend>
  <label><input type="radio" name="size" value="s"> Small</label>
  <label><input type="radio" name="size" value="l"> Large</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 vérifie cela

Repérer chaque élément <fieldset> sur chaque page.
Signaler tout <fieldset> qui n’a pas d’élément <legend> comme enfant direct.

Dépannage

Ma légende existe, mais elle est quand même signalée

Le <legend> doit être un enfant direct du <fieldset>. Une légende imbriquée dans un autre élément, comme un conteneur <div>, n’est pas reconnue comme la légende du groupe — ni par cette vérification ni par les .