Champs de formulaire non groupés : pourquoi des boutons radio liés ont besoin de fieldset

Lorsqu'un formulaire présente un groupe de choix liés - un ensemble de boutons radio pour « Mode de contact préféré », des cases à cocher pour « Quelles fonctionnalités utilisez-vous ? » -, chaque option possède généralement sa propre <label>. Mais sans <fieldset> englobant le groupe et sans <legend> nommant ce que ce groupe représente, une personne qui parcourt les options une à une avec un lecteur d'écran n'a aucun moyen de savoir que ces choix vont ensemble, ni à quelle question d'ensemble ils répondent.

Le problème que cela résout

Une personne voyante voit le titre du groupe placé au-dessus des options et en déduit le lien. Une personne utilisant un lecteur d'écran qui arrive sur le troisième bouton radio, hors contexte, n'entend que l'étiquette de cette option (« E-mail ») - et non le fait qu'il s'agit de l'un de plusieurs choix mutuellement exclusifs pour « Mode de contact préféré ». Englober le groupe dans un <fieldset> avec un <legend> fournit automatiquement ce contexte aux technologies d'assistance, annoncé avec chaque option.

La correction

<!-- Avant : options étiquetées individuellement, mais aucun contexte de groupe -->
<p>Mode de contact préféré</p>
<input type="radio" id="email" name="contact"><label for="email">E-mail</label>
<input type="radio" id="tel" name="contact"><label for="tel">Téléphone</label>

<!-- Après : fieldset + legend donnent au groupe un sens sémantique réel -->
<fieldset>
  <legend>Mode de contact préféré</legend>
  <input type="radio" id="email" name="contact"><label for="email">E-mail</label>
  <input type="radio" id="tel" name="contact"><label for="tel">Téléphone</label>
</fieldset>

Le <legend> fait désormais partie du contexte annoncé pour chaque option : un lecteur d'écran lit généralement « Mode de contact préféré, E-mail, bouton radio » en arrivant sur la première option, donnant l'image complète en une seule annonce.

Quand cela s'applique

Cela concerne surtout les groupes de boutons radio ou de cases à cocher liés : une case à cocher isolée ou un champ texte sans rapport n'a pas besoin de <fieldset>. Le modèle vise précisément les cas où plusieurs champs étiquetés individuellement n'ont de sens qu'ensemble, comme réponse à une même question.

Où l'oubli est facile

Les formulaires en plusieurs étapes et les pages de réglages comportant de nombreux groupes d'interrupteurs sont les endroits où cela est le plus souvent omis : chaque interrupteur reçoit bien son étiquette, ce qui donne au formulaire l'apparence d'être complet lors d'une vérification visuelle rapide, voire semi-automatisée, alors que le contexte de groupe qui les relie manque silencieusement.

Références officielles

• Technique W3C H71