Critère 1.9

Légendes d'images

Les légendes d'images doivent être correctement reliées à l'image correspondante.

En Bref : L'essentiel à retenir

Pour associer une légende visible à une image pour l'accessibilité, utilisez les balises HTML5 `<figure>` et `<figcaption>`.
Si vous ne pouvez pas utiliser `<figure>`, la directive ARIA `aria-labelledby` est une alternative possible.
Évitez de placer la légende dans un `<div>` sans lien sémantique et ne répétez pas la légende complète dans l'attribut `alt`.
Cette approche est essentielle pour la conformité avec le critère 1.9 du RGAA concernant l'accessibilité des images.

Objectif

Si une image a une légende visible, cette légende doit être programmatiquement associée à l'image pour que les utilisateurs de lecteurs d'écran comprennent le lien entre les deux.

Solution Technique

1. Balises `<figure>` et `<figcaption>`

C'est la méthode standard HTML5 et la plus robuste.

<figure>
  <img src="tour-eiffel.jpg" alt="La Tour Eiffel vue du Trocadéro" />
  <figcaption>Fig. 1 : La Tour Eiffel illuminée la nuit.</figcaption>
</figure>

2. ARIA (`aria-labelledby`)

Si vous ne pouvez pas utiliser <figure>, utilisez aria-labelledby.

<img src="schema.png" alt="Schéma de l'architecture" aria-labelledby="legende-schema" />
<p id="legende-schema">Schéma 1 : Architecture micro-services</p>

Erreurs fréquentes

❌ Mettre la légende dans un <div> juste en dessous sans lien sémantique.
❌ Répéter exactement le texte de la légende dans l'attribut alt (redondance). Si la légende décrit complètement l'image, l'attribut alt peut être plus concis ou renvoyer vers la légende.

Ressources

Critère 1.9 du RGAA