figure

Quand l’utiliser

Utilisez <figure> et <figcaption>. L’élément natif gère le rôle, l’association de la légende et la sémantique du plan de document.

role="figure" ne convient que lorsque vous ne pouvez pas utiliser l’élément natif. Associez-le avec un nom accessible — soit un aria-labelledby pointant vers un élément de légende, soit un aria-label portant le texte de la légende.

Une figure annonce « figure, [légende] » dans les lecteurs d’écran, signalant que ce qui suit est illustratif et non de la prose courante. Utilisez-le pour les listings de code, les schémas, les graphiques et les images en ligne qui méritent une légende — pas pour chaque image décorative.

Erreurs courantes

• <figure> sans <figcaption> ni aria-label. La figure n’a pas de nom accessible et le rôle apporte peu de valeur.
• role="figure" sur un <div> englobant un <img> dont l’attribut alt couvre déjà la description. Redondant ; utilisez simplement l’<img>.
• Placer <figcaption> en dehors de <figure>. La légende doit être un enfant direct pour que l’association native fonctionne.
• Plusieurs figures sur une page avec le même texte de légende. Ajoutez aria-labelledby pointant vers un élément unique pour que la navigation par figure soit fonctionnelle.
• role="figure" directement sur un <img>. Utilisez-le sur l’élément conteneur, avec l’image à l’intérieur.

Exemple

<!-- Préféré -->
<figure>
  <img src="/images/keyboard-trap.svg" alt="Indicateur de focus bloqué sur un overlay modal sans issue">
  <figcaption>Un piège de focus dans une modale mal construite.</figcaption>
</figure>

<!-- Quand <figure> est impossible -->
<div role="figure" aria-labelledby="diag-1">
  <img src="…" alt="…">
  <p id="diag-1">Ordre de tabulation dans une application monopage inaccessible.</p>
</div>