Regroupement avec fieldset

Silktide vérifie que les groupes de boutons radio ou de cases à cocher liés sont encadrés dans un fieldset. Le fieldset indique à la que les options vont ensemble et forment une seule question.

En , les boutons radio et les cases à cocher qui partagent le même attribut name se comportent comme un seul groupe - choisissez votre taille, choisissez vos garnitures. Visuellement, le regroupement est évident parce que les options sont ensemble; mais dans le code, seul un <fieldset> le rend explicite.

<!-- Problème : options liées sans aucun regroupement -->
<label><input type="checkbox" name="fruit" value="apple"> Pomme</label>
<label><input type="checkbox" name="fruit" value="banana"> Banane</label>

Pourquoi c'est important

Un annonce chaque option au fur et à mesure qu'elle est atteinte. Sans regroupement, la personne entend « Pomme, case à cocher » et « Banane, case à cocher » sans indication de la question à laquelle elles répondent — le texte de la question a peut-être été lu bien avant, ou n'a jamais été associé du tout. Placées dans un fieldset avec une légende, chaque option est annoncée dans son contexte, de sorte que la personne qui écoute sait toujours ce qu'elle est en train de choisir.

Comment corriger

Encadrez chaque ensemble d'options liées dans un <fieldset> et décrivez le groupe avec un <legend> :

<!-- Corrigé : le groupe est explicite et nommé -->
<fieldset>
  <legend>Sélectionnez vos fruits préférés</legend>
  <label><input type="checkbox" name="fruit" value="apple"> Pomme</label>
  <label><input type="checkbox" name="fruit" value="banana"> Banane</label>
</fieldset>

Comment Silktide teste ceci

Trouver tous les boutons radio et toutes les cases à cocher sur chaque page.
Les regrouper par leur attribut name.
Pour chaque groupe de deux ou plus, signaler chaque membre qui n'est pas à l'intérieur d'un élément <fieldset>.

Dépannage

Mes options sont regroupées autrement

Cette vérification recherche spécifiquement un ancêtre <fieldset>. Les regroupements exprimés uniquement visuellement, ou avec un autre balisage tel que role="group", ne sont pas détectés. La méthode avec fieldset est la plus largement prise en charge; si vous êtes certain que votre regroupement alternatif est correctement annoncé, vous pouvez le constat.