Un formulaire de commande regroupe plusieurs champs liés entre eux : rue, ville, code postal, tous rassemblés sous un même intitulé « Adresse de livraison ». Entourer ces champs d'un simple bloc avec un titre visuel au-dessus fonctionne à l'écran, mais un utilisateur qui navigue au clavier ou avec un lecteur d'écran perd ce titre dès qu'il quitte le premier champ du groupe.
<legend> résout précisément ce problème : c'est le titre d'un groupe de champs qui reste associé à chaque champ du groupe, pas seulement au premier.
Définition
legend est le titre d'un groupe de champs de formulaire. Il n'a de sens qu'à l'intérieur d'un <fieldset>, la balise qui délimite le groupe, et il doit impérativement en être le tout premier enfant direct : avant le premier champ, avant tout texte, avant tout autre élément.
Placé ailleurs dans le fieldset, même juste après le premier champ, legend perd sa validité et les navigateurs comme les technologies d'assistance ne l'associent plus correctement au groupe. Ce n'est pas une question de style mais une règle stricte du HTML.
Un legend qui n'est pas le tout premier enfant du fieldset, par exemple précédé d'un paragraphe d'introduction, n'est plus reconnu comme le titre du groupe par les technologies d'assistance. Tout texte d'accompagnement doit se placer après legend, jamais avant.
Ce que le lecteur d'écran en fait
La particularité de legend par rapport à un simple titre visuel placé au-dessus du groupe tient à la façon dont les lecteurs d'écran l'exploitent : son contenu est annoncé avant chaque champ du groupe, pas une seule fois au survol du groupe entier. Un utilisateur qui navigue au clavier de champ en champ réentend donc « Adresse de livraison » avant d'atteindre le champ « Rue », puis à nouveau avant d'atteindre « Ville », sans avoir à remonter visuellement en haut du formulaire pour se rappeler de quel groupe il s'agit.
De la même façon qu'un tableau porte un titre grâce à <caption>, un groupe de champs porte le sien grâce à legend : les deux balises donnent un intitulé accessible à un conteneur, chacune dans son propre contexte.
Exemple concret : un groupe « Adresse de livraison »
<fieldset>
<legend>Adresse de livraison</legend>
<label for="rue">Rue</label>
<input id="rue" name="rue" type="text">
<label for="ville">Ville</label>
<input id="ville" name="ville" type="text">
<label for="cp">Code postal</label>
<input id="cp" name="cp" type="text">
</fieldset>Un second groupe, dédié au mode de livraison, peut par exemple être suivi d'un <output> qui affiche le tarif calculé dès qu'une option est choisie : le fieldset délimite ce qui appartient au choix, output affiche ce qui en résulte.
Comparer les méthodes de regroupement
legend n'est pas la seule façon de donner un titre à un groupe de champs, mais c'est la seule qui répète cet intitulé avant chaque champ pour un lecteur d'écran, plutôt que de le lire une seule fois au passage.
| Méthode | Annoncée avant chaque champ du groupe | Conteneur requis |
|---|---|---|
legend dans fieldset | Oui | fieldset |
Titre visuel seul (h3 ou strong) | Non, lu une seule fois | Aucun en particulier |
aria-labelledby sur un groupe | Oui | Un conteneur avec role="group" |
Bonnes pratiques
Réservez fieldset et legend aux groupes qui rassemblent plusieurs champs réellement liés entre eux : une adresse, un mode de paiement, une plage de dates. Un formulaire avec un seul champ n'a besoin ni de fieldset ni de legend, une simple étiquette suffit. Gardez le texte de legend court, quelques mots au maximum : un texte d'accompagnement plus long se place dans un paragraphe juste après, à l'intérieur du fieldset.
Questions fréquentes
Peut-on styliser legend comme n'importe quel texte, changer sa police, sa couleur ?
Oui, entièrement. Son apparence par défaut, souvent en gras et chevauchant la bordure du fieldset, se retire ou se remplace complètement en CSS. Le comportement d'accessibilité, lui, reste intact quel que soit le style appliqué, puisqu'il dépend de la position de legend dans le document, pas de son rendu visuel.
Faut-il un fieldset pour un formulaire entier, ou seulement pour des sous-groupes ?
Réservez fieldset aux sous-groupes de champs liés. Entourer un formulaire entier d'un seul fieldset avec un seul legend n'apporte rien : la balise form délimite déjà le formulaire dans son ensemble. fieldset gagne sa place dès qu'il existe au moins deux groupes distincts à faire ressortir l'un de l'autre.
Que se passe-t-il si j'oublie legend dans un fieldset ?
Le fieldset continue de s'afficher visuellement, souvent avec un simple contour. Mais sans legend, un lecteur d'écran n'annonce plus aucun intitulé pour le groupe : seul le contour visuel reste, sans aucune information de regroupement transmise à qui ne le voit pas. Mieux vaut ne jamais poser un fieldset sans son legend.