Légende

En accessibilité web, une légende est un texte visible qui identifie un contenu groupé. HTML propose trois balises selon le contexte : <caption> pour les tableaux, <figcaption> pour les figures, et <legend> pour les groupes de champs dans un formulaire.

Un lecteur d'écran arrive sur un tableau de 47 lignes. Sans titre, l'utilisateur ne sait pas s'il contient des horaires de train, des résultats financiers ou une liste de courses. La légende règle ce problème en une ligne.

Une légende est un texte visible qui donne un nom à un bloc de contenu groupé. Elle remplit le même rôle qu'un titre de chapitre dans un livre\u00a0: orienter le lecteur avant qu'il décide de lire la suite.

#Trois balises, un seul rôle

HTML propose trois éléments pour ce concept, chacun adapté à un contexte précis.

<caption> identifie un tableau de données. Placé en premier enfant de <table>, il est annoncé par les lecteurs d'écran avant la navigation dans les cellules. C'est le seul moyen fiable de donner un nom programmatique à un tableau.

<figcaption> accompagne une <figure> (image, graphique, extrait de code). Il fournit le nom accessible de la figure et peut contenir du texte riche, des liens ou des renvois.

<legend> décrit un groupe de champs dans un formulaire. Premier enfant de <fieldset>, il est lu avant chaque contrôle du groupe par les technologies d'assistance. Quand un utilisateur atteint un bouton radio, il entend d'abord la légende, puis le libellé du bouton.

<table>
  <caption>Horaires des cours du lundi</caption>
  <!-- lignes et cellules -->
</table>
 
<figure>
  <img src="schema.png" alt="Architecture du système">
  <figcaption>Figure 1\u00a0: vue d'ensemble des composants</figcaption>
</figure>
 
<fieldset>
  <legend>Adresse de livraison</legend>
  <!-- champs du formulaire -->
</fieldset>

#Les pièges que tout le monde fait

Confondre alt et <figcaption>. alt remplace l'image pour les technologies d'assistance. <figcaption> est visible par tout le monde et donne un contexte éditorial. Les deux remplissent des rôles distincts\u00a0: une image dans une <figure> a besoin des deux.

Tableau dans une <figure>\u00a0: un seul titre. Quand un <table> est imbriqué dans une <figure>, utilisez <figcaption> et non <caption>. Les deux coexistent mal\u00a0: certains lecteurs d'écran restituent le titre deux fois.

<fieldset> sans <legend>. Un groupe de boutons radio sans légende perd tout son contexte. L'utilisateur entend «\u00a0Oui\u00a0» ou «\u00a0Non\u00a0» sans savoir à quelle question il répond.

#En résumé

Tableau\u00a0: <caption>. Figure\u00a0: <figcaption>. Formulaire\u00a0: <legend>. Trois balises, une même fonction. Si votre contenu est groupé, il mérite une légende.

Retour au glossaire

Partagez cet article

Pour aller plus loin

Élément graphique

Un élément graphique est tout contenu visuel non textuel : image, icône SVG, pictogramme, graphique de données. Le terme dépasse la simple balise <img> et couvre aussi les <svg>, <canvas> et <object>. Chaque élément graphique porteur d'information doit avoir une alternative textuelle ; chaque élément décoratif doit être masqué aux technologies d'assistance.

Tableau de données

Un tableau de données est un élément HTML qui organise des informations en lignes et en colonnes, où chaque cellule entretient une relation logique avec ses en-têtes. Contrairement à un tableau de mise en forme (utilisé pour disposer des éléments visuellement), un tableau de données exige un balisage sémantique (balises <th>, attribut scope, élément <caption>) pour que les lecteurs d'écran restituent le contexte de chaque valeur.

Regroupement de champs de formulaire

Le regroupement de champs de formulaire consiste à associer des contrôles liés entre eux dans le code HTML, via les éléments fieldset et legend. Ce regroupement sémantique permet aux lecteurs d'écran d'annoncer le contexte commun des champs (par exemple, « Adresse de livraison ») avant chaque champ du groupe. Sans lui, des labels identiques comme « Prénom » ou « Code postal » deviennent ambigus.