RGAA Lab

RGAA 4.1.2 · Images · Critère 1.9

Chaque légende d’image est-elle, si nécessaire, correctement reliée à l’image correspondante ?

Une légende n'est pas une alternative : elle nomme l'image, la date, la crédite, la commente. Posée à côté sans lien de code, elle devient un texte flottant, énoncé entre deux paragraphes sans que rien ne dise de quelle image il parle. Sur une page qui en aligne dix, plus aucune ne se rattache à la sienne.

Ce que dit le référentiel

Transcription du RGAA 4.1.2, sans interprétation. C’est ce texte qui fait foi, et celui que vous citez dans un rapport.

  1. 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’attribut type="image" ou possédant un attribut WAI-ARIA role="img") et sa légende adjacente sont contenues dans une balise <figure> ;
    • La balise <figure> possède un attribut WAI-ARIA role="figure" ou role="group" ;
    • La balise <figure> possède un attribut WAI-ARIA aria-label dont le contenu est identique au contenu de la légende ;
    • La légende est contenue dans une balise <figcaption>.
  2. 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-ARIA role="figure" ou role="group" ;
    • La balise <figure> possède un attribut WAI-ARIA aria-label dont le contenu est identique au contenu de la légende ;
    • La légende est contenue dans une balise <figcaption>.
  3. 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-ARIA role="figure" ou role="group" ;
    • La balise <figure> possède un attribut WAI-ARIA aria-label dont le contenu est identique au contenu de la légende ;
    • La légende est contenue dans une balise <figcaption>.
  4. 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-ARIA role="figure" ou role="group" ;
    • La balise <figure> possède un attribut WAI-ARIA aria-label dont le contenu est identique au contenu de la légende ;
    • La légende est contenue dans une balise <figcaption>.
  5. 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-ARIA role="figure" ou role="group" ;
    • La balise <figure> possède un attribut WAI-ARIA aria-label dont le contenu est identique au contenu de la légende ;
    • La légende est contenue dans une balise <figcaption>.

Comment le vérifier

  1. Repérer les textes qui font office de légende : sous l'image, en plus petit, en italique, précédés de « Fig. ».
  2. S'arrêter sur le « si nécessaire » de l'énoncé : le critère ne porte que sur les vraies légendes. Un paragraphe qui commente l'image de loin n'en est pas une, et exiger un <figure> autour serait une erreur d'audit.
  3. Vérifier les quatre conditions, qui sont cumulatives : l'image et sa légende dans un même <figure>, la légende dans un <figcaption>, un role="figure" ou role="group" sur le <figure>, et sur ce même <figure> un aria-label reprenant à l'identique le texte de la légende.
  4. Vérifier enfin que la légende ne tient pas lieu d'alternative : les deux coexistent et ne disent pas la même chose.

Ce que notre outil fait

Assisté

Le moteur repère les éléments concernés et vous pose la question. Il ne conclut pas à votre place.

À connaître avant de s'y fier : l'assistant ne pose la question « la légende est-elle correctement reliée ? » que lorsque l'image est déjà dans un <figure> contenant un <figcaption>. Le cas que le critère vise en premier — une légende posée à côté de l'image, sans <figure> du tout — n'est jamais soulevé, et le critère sort non applicable pour cette image : rien dans le code ne distingue un paragraphe de légende d'un paragraphe ordinaire. Parcourir la page reste donc à votre charge. Et lorsque la question est posée, l'outil ne contrôle ni le rôle ni l'aria-label du <figure> : répondre « oui » vous engage sur les quatre conditions.

Comment nous mesurons ce que l'outil sait faire · ce critère s'audite dans l'extension RGAA Lab.

Les pièges

Les erreurs qu’on rencontre vraiment, relevées au fil des audits.

  • Un <figure> avec son <figcaption> ne suffit pas au référentiel, qui exige en plus le rôle explicite et l'aria-label — de quoi compenser le support inégal de <figure> par les technologies d'assistance. C'est le manquement le plus fréquent du critère, et il passe inaperçu parce que le balisage a l'air juste.
  • Un aria-label qui reformule la légende au lieu de la recopier échoue : le test demande un contenu identique.
  • La légende recopiée dans l'alt la fait entendre deux fois. L'alternative décrit l'image, la légende la commente.
  • Un <figure> peut envelopper autre chose qu'une image — un extrait de code, une citation. Le 1.9 ne porte que sur les figures d'image.

À lire avec