Regroupement de champs

Lorsque des champs de même nature sont présentés dans un formulaire, une bonne pratique d'accessibilité consiste à les regrouper.

Implémentation HTML

Les champs de même nature sont regroupés avec fieldset et titrés avec legend.
Pour la conformité du code HTML, l’élément legend doit impérativement suivre la balise <fieldset>.

Code HTML

<fieldset>
  <legend>Joueur 1</legend>
  <label for="nom-1">Nom</label>
  <input type="text" id="nom-1" name="nom-1" />
  <label for="prenom-1">Prénom</label>
  <input type="text" id="prenom-1" name="prenom-1" />
</fieldset>
<fieldset>
  <legend>Joueur 2</legend>
  <label for="nom-2">Nom</label>
  <input type="text" id="nom-2" name="nom-2" />
  <label for="prenom-2">Prénom</label>
  <input type="text" id="prenom-2" name="prenom-2" />
</fieldset>

Visuel

Joueur 1
Joueur 2

Regroupement de boutons radios et de cases à cocher

Les boutons radios et les cases à cocher seront présentés à l’aide d’une liste.

Exemple avec des cases à cocher

<fieldset>
  <legend>Activités préférées</legend>
  <ul>
    <li>
      <input
        type="checkbox"
        id="matin"
        name="activites"
        value="Grasse-matinée"
      />
      <label for="matin">Grasse-matinée</label>
    </li>
    <li>
      <input type="checkbox" id="sieste" name="activites" value="sieste" />
      <label for="sieste">Sieste</label>
    </li>
  </ul>
</fieldset>
Activités préférées

Exemple avec des boutons radios

<fieldset>
  <legend>Aimez-vous le chocolat ?</legend>
  <ul>
    <li>
      <input type="radio" id="oui" value="oui" name="chocolat" />
      <label for="oui">Oui</label>
    </li>
    <li>
      <input type="radio" id="non" value="non" name="chocolat" />
      <label for="non">Non</label>
    </li>
  </ul>
</fieldset>
Aimez-vous le chocolat ?