<figcaption> en HTML : la légende qui décrit vraiment une figure

Une image accompagnée d'une légende n'a rien d'exceptionnel : un graphique suivi d'une phrase qui en précise la source, une photo suivie d'un numéro de figure et d'une description. Le réflexe courant est d'ajouter cette légende dans un simple paragraphe placé juste après l'image, sans lien technique entre les deux. Pour un visiteur qui voit la page, l'association est évidente. Pour un lecteur d'écran, ce paragraphe reste un texte isolé parmi d'autres, sans rapport formel avec l'image qui le précède.

<figcaption> répare ce manque : associée à une <figure>, elle en devient la légende officielle, reconnue comme telle par le navigateur et par les technologies d'assistance.

Définition

<figcaption> est la légende d'une <figure> : elle décrit ce que montre le contenu qu'elle accompagne, qu'il s'agisse d'une image, d'un graphique ou d'un extrait de code. La norme n'en accepte qu'une seule par figure, et elle doit se trouver à un endroit précis : soit tout au début, soit tout à la fin du contenu de la figure, jamais au milieu.

Une place précise : premier ou dernier enfant

Les deux positions sont valides et répondent à des habitudes de lecture différentes. Placée en premier, la légende fonctionne comme un titre qui annonce ce qui va suivre, une habitude fréquente dans les publications scientifiques ou techniques (« Figure 1 : évolution du trafic mensuel »). Placée en dernier, elle fonctionne comme une explication qui vient après coup, l'usage le plus courant sur le web pour les photos et les illustrations.

<figure>
  <img
    src="trafic-mensuel.png"
    alt="Courbe du trafic mensuel de janvier à décembre"
  />
  <figcaption>Figure 1 : le trafic double après la refonte de juin</figcaption>
</figure>

Une association automatique pour les technologies d'assistance

Dès qu'une <figcaption> est présente, le navigateur associe automatiquement son texte au contenu de la figure comme description accessible, sans qu'il soit nécessaire d'ajouter un aria-describedby à la main. Un lecteur d'écran annonce alors la figure et sa légende comme un seul ensemble cohérent, dans l'ordre où elles sont écrites. C'est ce lien automatique qui distingue vraiment <figcaption> d'un paragraphe placé au hasard à côté d'une image : l'un est structurellement rattaché, l'autre reste un voisin de circonstance.

Différence avec la légende d'un tableau

<caption> joue un rôle comparable, mais réservé aux tableaux : elle ne peut apparaître qu'à l'intérieur d'un tableau, et uniquement comme premier enfant. <figcaption>, elle, ne fonctionne qu'à l'intérieur d'une <figure>, jamais ailleurs. Les deux balises partagent la même idée, légender un contenu, mais chacune reste strictement liée à son propre conteneur.

Bonnes pratiques de rédaction

Une bonne légende ajoute une information que l'image seule ne donne pas : un numéro de référence, la source des données, la date de prise de vue, ou une explication du contexte. Elle gagne à rester courte, une phrase ou deux suffisent largement. Le piège à éviter est de répéter mot pour mot ce que dit déjà l'attribut alt de l'image : les deux textes se lisent l'un après l'autre pour un lecteur d'écran, et une répétition intégrale n'apporte rien, elle allonge simplement l'écoute pour rien.

Non, la norme n'en accepte qu'une seule par figure. Si plusieurs légendes sont présentes, le comportement devient incohérent d'un navigateur à l'autre, et le résultat le plus sûr reste toujours une seule légende, bien positionnée en premier ou en dernier enfant.

Non, les deux jouent des rôles différents et ne devraient pas répéter la même phrase. L'attribut alt décrit l'image elle-même pour quelqu'un qui ne peut pas la voir, tandis que la légende décrit la figure dans son ensemble, avec son numéro, sa source ou son contexte, et reste visible pour tout le monde.

Oui, sans problème. Une figure peut contenir un extrait de code, un graphique, une citation ou une vidéo, et <figcaption> fonctionne exactement de la même façon pour légender n'importe lequel de ces contenus.