Les légendes placées sous vos photos — « De gauche à droite : … » ou « Vue du futur espace vert… » — sont-elles correctement associées à leur image ?
Critère officiel 1.9 — Chaque légende d’image est-elle, si nécessaire, correctement reliée à l’image correspondante ?
Pourquoi c'est important
Une légende écrite en italique sous une photo, sans lien technique entre les deux, est traitée par le logiciel de lecture comme un texte indépendant. L'utilisateur entend d'abord la description de l'image (si elle existe), puis une phrase mystérieuse sans contexte. Il ne sait pas à quelle image cette légende se rapporte.
Exemples concrets
Ce qui est conforme
La photo de la remise des médailles du travail est insérée avec le bloc Image de WordPress et sa légende renseignée dans le champ dédié : « Remise des médailles du travail — 1er mai 2025. M. le Maire en compagnie de 12 récipiendaires. » Gutenberg génère automatiquement la structure correcte qui relie techniquement légende et image.
Ce qui pose problème
La même photo est insérée avec le bloc Image, puis un bloc Paragraphe en italique est ajouté manuellement en dessous. Visuellement identique, mais le logiciel de lecture ne fait pas le lien — il lit l'image puis la phrase en italique comme deux éléments sans rapport.
Comment agir
Dans Gutenberg, utilisez toujours le champ « Légende » intégré au bloc Image — c'est le champ qui apparaît directement sous l'image sélectionnée dans l'éditeur. N'ajoutez jamais une légende en ajoutant manuellement un bloc Paragraphe séparé sous l'image. La distinction est invisible à l'œil mais déterminante pour les technologies d'assistance.
Règles clés
- Utiliser <figure> pour grouper et <figcaption> pour la légende.
- Si <figcaption> décrit entièrement l'image : alt="".
- Si <figcaption> est un titre partiel : alt complémentaire nécessaire.
Erreurs fréquentes
- Image et légende dans des <div> séparés sans <figure>
- Légende dans un <p> adjacent sans association sémantique
- alt qui répète la légende — redondance : si figcaption décrit l'image, alt=""
Exemples de code
image et légende sans association
✗ Non conforme<img src="tour-eiffel.jpg" alt="Vue de la Tour Eiffel">
<p>La Tour Eiffel, Paris, construite en 1889.</p>Aucune relation sémantique. Le lecteur d'écran lit les deux éléments indépendamment.
image et légende avec figure/figcaption
✓ Conforme<figure>
<img src="tour-eiffel.jpg" alt="">
<figcaption>
La Tour Eiffel, Paris, construite en 1889
par Gustave Eiffel.
</figcaption>
</figure>alt vide car figcaption décrit entièrement l'image. <figure> associe sémantiquement les deux éléments.
Référence WCAG : 1.1.1, 4.1.2