Chaque légende d’image est-elle, si nécessaire, correctement reliée à l’image correspondante ?
Un lecteur d’écran parcourt la page dans l’ordre du DOM. S’il rencontre une image suivie d’un texte de crédit photographique, il lit les deux — mais sans rien qui lui indique leur relation. L’utilisateur entend « Photo : manifestation devant l’Assemblée nationale » puis « © Jean Dupont, 2024 » comme deux éléments distincts. Le lien sémantique entre l’image et sa légende reste invisible pour les technologies d’assistance.
Le RGAA exige une structure précise : l’image et sa légende regroupées dans un <figure> portant role="figure" ou role="group", et un aria-label sur ce <figure> dont le contenu est identique au texte du <figcaption>. Cette combinaison permet au lecteur d’écran d’annoncer l’ensemble image-légende comme une unité cohérente.
Ce critère couvre cinq types d’images : les images bitmap (<img>, <canvas>), les images objet et embarquées (<object>, <embed> de type image), les images vectorielles (<svg>) et les images de formulaire (<input type="image">). La structure requise est identique pour tous.
Une image légendée n’est jamais décorative. Si elle a une légende, c’est qu’elle porte une information. L’attribut alt doit donc être renseigné — la note technique du critère 1.9 le rappelle explicitement : ces images doivent respecter les critères 1.1 et 1.3.
5 tests pour s'assurer que chaque légende d'image est pertinente
Légende d'image <img> et role="img"
Cible : toutes les images <img>, <input type="image"> et les éléments avec role="img" qui ont une légende visible dans la page.
- Repérez chaque image de ce type accompagnée d’un texte de légende (crédit, date, description contextuelle, copyright).
- Vérifiez que l’image et sa légende sont toutes les deux à l’intérieur d’un élément
<figure>. - Vérifiez que ce
<figure>porterole="figure"ourole="group". - Vérifiez que ce
<figure>porte un attributaria-labeldont la valeur est exactement identique au texte du<figcaption>(pas un résumé, pas une reformulation). - Vérifiez que la légende est dans un élément
<figcaption>.
Test validé si les cinq conditions sont réunies pour chaque image concernée. Échec dès qu’une seule manque.
Légende d'image <object>
Cible : les images insérées via <object type="image/png">, <object type="image/jpeg"> ou tout autre sous-type image/*.
- Repérez chaque
<object>dont letypecommence parimage/et qui est accompagné d’une légende. - Vérifiez que l’élément
<object>et sa légende sont regroupés dans un<figure>. - Vérifiez que ce
<figure>porterole="figure"ourole="group". - Vérifiez que l’
aria-labeldu<figure>est identique au texte du<figcaption>. - Vérifiez que la légende est dans un
<figcaption>.
Test validé si les cinq conditions sont réunies pour chaque image concernée.
Légende d'image <embed>
Cible : les images insérées via <embed type="image/png">, <embed type="image/svg+xml"> ou tout autre sous-type image/*.
- Repérez chaque
<embed>dont letypecommence parimage/et qui est accompagné d’une légende. - Vérifiez que l’élément
<embed>et sa légende sont regroupés dans un<figure>. - Vérifiez que ce
<figure>porterole="figure"ourole="group". - Vérifiez que l’
aria-labeldu<figure>est identique au texte du<figcaption>. - Vérifiez que la légende est dans un
<figcaption>.
Test validé si les cinq conditions sont réunies pour chaque image concernée.
Légende d'image <svg>
Cible : les images vectorielles <svg> inline accompagnées d’une légende visible.
- Repérez chaque
<svg>qui a une légende (crédit, description, source). - Vérifiez que le
<svg>et sa légende sont regroupés dans un<figure>. - Vérifiez que ce
<figure>porterole="figure"ourole="group". - Vérifiez que l’
aria-labeldu<figure>est identique au texte du<figcaption>. - Vérifiez que la légende est dans un
<figcaption>.
Test validé si les cinq conditions sont réunies pour chaque image concernée. Note : le <title> interne au SVG couvre le critère 1.1, pas celui-ci.
Légende d'image <canvas>
Cible : les images dessinées via <canvas> accompagnées d’une légende visible dans la page.
- Repérez chaque
<canvas>qui a une légende (source de données, crédit, date). - Vérifiez que le
<canvas>et sa légende sont regroupés dans un<figure>. - Vérifiez que ce
<figure>porterole="figure"ourole="group". - Vérifiez que l’
aria-labeldu<figure>est identique au texte du<figcaption>. - Vérifiez que la légende est dans un
<figcaption>.
Test validé si les cinq conditions sont réunies pour chaque image concernée.
Exemples
❌ Non conforme : figure + figcaption sans role ni aria-label
<figure>
<img src="assemblee-nationale.jpg" alt="Manifestation devant l’Assemblée nationale, Paris">
<figcaption>Paris, 15 mars 2024, © Jean Dupont</figcaption>
</figure>La structure <figure> + <figcaption> est en place, mais le <figure> n’a ni role ni aria-label. NVDA et JAWS lisent l’image et la légende comme deux éléments indépendants. L’utilisateur entend le crédit sans savoir à quelle image il appartient. Cette erreur est la plus fréquente en audit : le développeur croit être conforme parce qu’il utilise les bonnes balises HTML.
✅ Conforme : Image correctement reliée à sa légende
<figure role="group" aria-label="Paris, 15 mars 2024, © Jean Dupont">
<img src="assemblee-nationale.jpg" alt="Manifestation devant l’Assemblée nationale, Paris">
<figcaption>Paris, 15 mars 2024, © Jean Dupont</figcaption>
</figure>Le <figure> expose role="group" et un aria-label identique au contenu du <figcaption>. Le lecteur d’écran annonce le groupe, puis restitue l’image et sa légende comme une unité. L’utilisateur comprend immédiatement que le crédit appartient à cette image. Notez que l’alt décrit le contenu de l’image ; il n’est pas vide.
✅ Conforme : Galerie de photos avec crédits
<div class="galerie">
<figure role="figure" aria-label="Alpes suisses, janvier 2024, © Marc Dubois">
<img src="alpes.jpg" alt="Montagne enneigie au lever du soleil, Alpes suisses">
<figcaption>Alpes suisses, janvier 2024, © Marc Dubois</figcaption>
</figure>
<figure role="figure" aria-label="Guadeloupe, février 2024, © Laura Chen">
<img src="guadeloupe.jpg" alt="Plage de sable fin avec palmiers, Guadeloupe">
<figcaption>Guadeloupe, février 2024, © Laura Chen</figcaption>
</figure>
</div>Chaque <figure> est autonome : elle porte son propre role et son aria-label. Dans une galerie, cette structure évite toute ambiguïté sur quel crédit correspond à quelle image. L’utilisateur de lecteur d’écran navigue de figure en figure comme des blocs distincts et entièrement renseignés.
Astuces et pièges
⚠️ figure + figcaption sans role ni aria-label : l’erreur numéro un en audit
La majorité des sites utilise <figure> et <figcaption> correctement sur le plan HTML, et croit donc être conforme au critère 1.9. Ce n’est pas suffisant. Sans role="figure" (ou role="group") et sans aria-label identique à la légende, la relation image-légende n’est pas exposée de façon fiable aux technologies d’assistance. La sémantique native de <figure> n’est pas suffisamment bien restituée par tous les lecteurs d’écran.
⚠️ alt vide sur une image légendée : non conforme
La note technique du critère 1.9 est sans ambiguïté : les images légendées doivent respecter les critères 1.1 et 1.3. Une image légendée est automatiquement porteuse d’information. Utiliser alt="" sur une <img> dans un <figure>, même avec un <figcaption> présent, est non conforme. L’attribut alt doit décrire le contenu visuel de l’image.
💡 L’aria-label doit être la copie exacte du figcaption
Le RGAA exige que le contenu de l’aria-label soit « identique » au contenu du <figcaption>. Pas un résumé, pas une reformulation. Si votre <figcaption> contient du HTML (un lien, une emphase), l’aria-label reprend le texte nu sans balisage : <figcaption>© <a href="/bio">Marc Dubois</a></figcaption> donne aria-label="© Marc Dubois". Toute divergence crée une non-conformité.
⚠️ role="figure" ou role="group" : les deux sont valides, l’un marche mieux
Le RGAA accepte role="figure" et role="group". En pratique, role="group" bénéficie d’un meilleur support sur certaines combinaisons NVDA avec Firefox. Si vos tests de non-régression montrent un comportement inattendu avec role="figure", basculez sur role="group". Les deux satisfont le critère 1.9.
⚠️ Copyright discret dans un article : dès qu’il est visible, c’est une légende
Un crédit photographique placé juste sous une image, même tout petit et en grisé, est une légende au sens du RGAA. L’image cesse d’être décorative et tombe sous le critère 1.9. Si ce copyright est caché via aria-hidden="true", les utilisateurs de lecteur d’écran sont privés d’une information visible à tous les autres. Cette pratique n’est pas recommandée.
Questions fréquentes
Pourquoi figure + figcaption ne suffit-il pas à satisfaire le critère RGAA 1.9 ?
La sémantique native de <figure> n’est pas restituée de manière fiable par les lecteurs d’écran actuels. NVDA, JAWS et VoiceOver ne signalent pas systématiquement que l’image et la légende forment un groupe. Le RGAA impose donc les attributs ARIA pour garantir la restitution quelle que soit la technologie d’assistance. La balise HTML pose la structure ; ARIA expose la sémantique.
Comment choisir entre aria-labelledby et aria-label pour nommer un figure selon RGAA 1.9 ?
La méthodologie officielle des tests 1.9.1 à 1.9.5 mentionne explicitement aria-label dont le contenu est identique au <figcaption>. aria-labelledby pointant vers le <figcaption> n’est pas décrit dans cette méthodologie. Pour être certain de satisfaire le critère sans ambigüïté, utilisez aria-label avec le texte de la légende reproduit à l’identique.
Comment auditer rapidement le critère RGAA 1.9 sur une page web ?
Dans la console des DevTools, lancez document.querySelectorAll('figure') pour lister tous les <figure>. Pour chacun, vérifiez : présence d’un <figcaption>, présence de role sur le <figure>, et correspondance exacte entre aria-label et le texte du <figcaption>. Includdy signale aussi les structures ARIA manquantes ou incohérentes. Un test lecteur d’écran réel reste indispensable pour valider la restitution.
Quand un SVG inline avec <title> nécessite-t-il un figure pour respecter RGAA 1.9 ?
Oui, ce sont deux exigences distinctes. Le <title> interne au <svg> sert d’alternative textuelle à l’image (critère 1.1). La structure <figure role="group" aria-label="..."> + <figcaption> sert à relier l’image à sa légende (critère 1.9). Si votre SVG a une légende externe, les deux mécanismes sont nécessaires en parallèle.
Comment déterminer si une image illustrative sans crédit est concernée par RGAA 1.9 ?
Non. Le critère 1.9 s’applique uniquement « si nécessaire », c’est-à-dire quand une légende est effectivement présente. Une image purement illustrative sans crédit ni texte associé relève du critère 1.2 (images décoratives). Dès qu’un texte visible est associé à l’image (copyright, date, source), le critère 1.9 s’applique.