RGAA 4.1.2 · THÉMATIQUE 1 · IMAGES
Critère 1.9 : Chaque légende d’image est-elle, si nécessaire, correctement reliée à l’image correspondante ?
Texte officiel du RGAA 4.1.2 (DINUM), mis en page par Claren · Mis à jour le
Ce critère appartient à la thématique « Images » du RGAA 4.1.2. Il se vérifie par 5 tests.
Le critère
Chaque légende d’image est-elle, si nécessaire, correctement reliée à l’image correspondante ?
Les tests
Test 1.9.1
Chaque image pourvue d’une légende (balise <img>, <input> avec l’attribut type="image" ou possédant un attribut WAI-ARIA role="img" associée à une légende adjacente), vérifie-t-elle, si nécessaire, ces conditions ?
- L’image (balise
<img>,<input>avec l’attributtype="image"ou possédant un attribut WAI-ARIArole="img") et sa légende adjacente sont contenues dans une balise<figure>; - La balise
<figure>possède un attribut WAI-ARIArole="figure"ourole="group"; - La balise
<figure>possède un attribut WAI-ARIAaria-labeldont le contenu est identique au contenu de la légende ; - La légende est contenue dans une balise
<figcaption>.
Méthodologie du test 1.9.1
- Retrouver dans le document les images pourvues d’une légende structurées au moyen d’élément
<img>, d’un élément<input>avec l’attributtype="image"ou d’un élément possédant l’attribut WAI-ARIArole="img"; - Pour chaque image, vérifier que :
- L’image et sa légende sont contenues dans une balise
<figure>; - La balise
<figure>possède une propriété WAI-ARIArole="figure"ourole="group"; - La balise
<figure>possède un attribut WAI-ARIAaria-labeldont le contenu est identique au contenu de la légende ; - La légende est contenue dans une balise
<figcaption>.
- L’image et sa légende sont contenues dans une balise
- Si c’est le cas pour chaque image, le test est validé.
Test 1.9.2
Chaque image objet pourvue d’une légende (balise <object> avec l’attribut type="image/…" associée à une légende adjacente), vérifie-t-elle, si nécessaire, ces conditions ?
- L’image objet et sa légende adjacente sont contenues dans une balise
<figure>; - La balise
<figure>possède un attribut WAI-ARIArole="figure"ourole="group"; - La balise
<figure>possède un attribut WAI-ARIAaria-labeldont le contenu est identique au contenu de la légende ; - La légende est contenue dans une balise
<figcaption>.
Méthodologie du test 1.9.2
- Retrouver dans le document les images objet pourvues d’une légende (élément
<object>avec l’attributtype="image/…") ; - Pour chaque image, vérifier que :
- L’image et sa légende sont contenues dans une balise
<figure>; - La balise
<figure>possède une propriété WAI-ARIArole="figure" ourole="group"; - La balise
<figure>possède un attribut WAI-ARIAaria-labeldont le contenu est identique au contenu de la légende ; - La légende est contenue dans une balise
<figcaption>.
- L’image et sa légende sont contenues dans une balise
- Si c’est le cas pour chaque image, le test est validé.
Test 1.9.3
Chaque image embarquée pourvue d’une légende (balise <embed> associée à une légende adjacente), vérifie-t-elle, si nécessaire, ces conditions ?
- L’image embarquée (balise
<embed>) et sa légende adjacente sont contenues dans une balise<figure>; - La balise
<figure>possède un attribut WAI-ARIArole="figure"ourole="group"; - La balise
<figure>possède un attribut WAI-ARIAaria-labeldont le contenu est identique au contenu de la légende ; - La légende est contenue dans une balise
<figcaption>.
Méthodologie du test 1.9.3
- Retrouver dans le document les images embarquées pourvues d’une légende (élément
<embed>avec l’attributtype="image/…") ; - Pour chaque image, vérifier que :
- L’image et sa légende sont contenues dans une balise
<figure>; - La balise
<figure>possède une propriété WAI-ARIArole="figure"ourole="group"; - La balise
<figure>possède un attribut WAI-ARIAaria-labeldont le contenu est identique au contenu de la légende ; - La légende est contenue dans une balise
<figcaption>.
- L’image et sa légende sont contenues dans une balise
- Si c’est le cas pour chaque image, le test est validé.
Test 1.9.4
Chaque image vectorielle pourvue d’une légende (balise <svg> associée à une légende adjacente), vérifie-t-elle, si nécessaire, ces conditions ?
- L’image vectorielle (balise
<svg>) et sa légende adjacente sont contenues dans une balise<figure>; - La balise
<figure>possède un attribut WAI-ARIArole="figure"ourole="group"; - La balise
<figure>possède un attribut WAI-ARIAaria-labeldont le contenu est identique au contenu de la légende ; - La légende est contenue dans une balise
<figcaption>.
Méthodologie du test 1.9.4
- Retrouver dans le document les images vectorielles pourvues d’une légende (élément
<svg>) ; - Pour chaque image, vérifier que :
- L’image et sa légende sont contenues dans une balise
<figure>; - La balise
<figure>possède une propriété WAI-ARIArole="figure"ourole="group"; - La balise
<figure>possède un attribut WAI-ARIAaria-labeldont le contenu est identique au contenu de la légende ; - La légende est contenue dans une balise
<figcaption>.
- L’image et sa légende sont contenues dans une balise
- Si c’est le cas pour chaque image, le test est validé.
Test 1.9.5
Chaque image bitmap pourvue d’une légende (balise <canvas> associée à une légende adjacente), vérifie-t-elle, si nécessaire, ces conditions ?
- L’image bitmap (balise
<canvas>) et sa légende adjacente sont contenues dans une balise<figure>; - La balise
<figure>possède un attribut WAI-ARIArole="figure"ourole="group"; - La balise
<figure>possède un attribut WAI-ARIAaria-labeldont le contenu est identique au contenu de la légende ; - La légende est contenue dans une balise
<figcaption>.
Méthodologie du test 1.9.5
- Retrouver dans le document les images bitmap (élément
<canvas>) ; - Pour chaque image, vérifier que :
- L’image et sa légende sont contenues dans une balise
<figure>; - La balise
<figure>possède une propriété WAI-ARIArole="figure"ourole="group"; - La balise
<figure>possède un attribut WAI-ARIAaria-labeldont le contenu est identique au contenu de la légende ; - La légende est contenue dans une balise
<figcaption>.
- L’image et sa légende sont contenues dans une balise
- Si c’est le cas pour chaque image, le test est validé.
Notes techniques
L’implémentation d’un attribut WAI-ARIA role="group" ou role="figure" sur l’élément parent <figure> est destiné à pallier le manque de support actuel des éléments <figure> par les technologies d’assistance. L’utilisation d’un élément <figcaption> pour associer une légende à une image impose au minimum l’utilisation d’un attribut WAI-ARIA aria-label sur l’élément parent <figure> dont le contenu sera identique au contenu de l’élément <figcaption>. Pour s’assurer d’un support optimal, il peut également être fait une association explicite entre le contenu de l’alternative textuelle de l’image et le contenu de l’élément <figcaption>, par exemple :
<img src="image.png" alt="Photo : soleil couchant" /><figcaption>Photo : crédit xxx</figcaption>
Les attributs WAI-ARIA aria-labelledby et aria-describedby ne peuvent pas être utilisés actuellement par manque de support par les technologies d’assistance.
Note : les images légendées doivent par ailleurs respecter le critère 1.1 et le critère 1.3 relatifs aux images porteuses d’information.
Correspondance WCAG
- WCAG 2.2, critère 1.1.1 : Non-text Content
- WCAG 2.2, critère 4.1.2 : Name, Role, Value
Ce qu’un contrôle automatique peut voir
Aucun contrôle automatique de Claren ne couvre ce critère : il se vérifie à la main.
Faire vérifier votre site
Un test automatique ne tranche qu’une partie des critères. Un audit RGAA les contrôle tous à la main, sur un échantillon de pages, et vous laisse un plan de correction.
Version officielle : critère 1.9 sur accessibilite.numerique.gouv.fr.
Textes du critère, des tests, de la méthodologie, des cas particuliers et des notes techniques : RGAA 4.1.2, DINUM, sous Licence Ouverte 2.0 (Etalab), repris tels quels. Intitulés des critères WCAG 2.2 : W3C, W3C Document License. Les liens des termes mènent au glossaire officiel du RGAA.