RGAA Lab

RGAA 4.1.2 · Images · Critère 1.6

Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée ?

Une image sans alternative n'existe pas ; une image complexe avec une bonne alternative courte existe sans son contenu. « Répartition du budget 2025 par poste » nomme le graphique et ne donne aucun chiffre : la personne qui ne le voit pas lit tout l'article sans jamais atteindre les données sur lesquelles il s'appuie.

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.6.1
    Chaque image (balise <img>) porteuse d’information, qui nécessite une description détaillée, vérifie-t-elle une de ces conditions ?
    • Il existe un attribut longdesc qui donne l’adresse (URL) d’une page ou d’un emplacement dans la page contenant la description détaillée ;
    • Il existe une alternative textuelle contenant la référence à une description détaillée adjacente à l’image ;
    • Il existe un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
  2. 1.6.2
    Chaque image objet (balise <object> avec l’attribut type="image/…") porteuse d’information, qui nécessite une description détaillée, vérifie-t-elle une de ces conditions ?
    • Il existe un attribut longdesc qui donne l’adresse (URL) d’une page ou d’un emplacement dans la page contenant la description détaillée ;
    • Il existe une alternative textuelle contenant la référence à une description détaillée adjacente à l’image ;
    • Il existe un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
  3. 1.6.3
    Chaque image embarquée (balise <embed>) porteuse d’information, qui nécessite une description détaillée, vérifie-t-elle une de ces conditions ?
    • Il existe un attribut longdesc qui donne l’adresse (URL) d’une page ou d’un emplacement dans la page contenant la description détaillée ;
    • Il existe une alternative textuelle contenant la référence à une description détaillée adjacente à l’image ;
    • Il existe un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
  4. 1.6.4
    Chaque bouton de type image (balise <input> avec l’attribut type="image") porteur d’information, qui nécessite une description détaillée, vérifie-t-il une de ces conditions ?
    • Il existe un attribut longdesc qui donne l’adresse (URL) d’une page ou d’un emplacement dans la page contenant la description détaillée ;
    • Il existe une alternative textuelle contenant la référence à une description détaillée adjacente à l’image ;
    • Il existe un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
  5. 1.6.5
    Chaque image vectorielle (balise <svg>) porteuse d’information, qui nécessite une description détaillée, vérifie-t-elle une de ces conditions ?
    • Il existe un attribut WAI-ARIA aria-label contenant l’alternative textuelle et une référence à une description détaillée adjacente ;
    • Il existe un attribut WAI-ARIA aria-labelledby associant un passage de texte faisant office d’alternative textuelle et un autre faisant office de description détaillée ;
    • Il existe un attribut WAI-ARIA aria-describedby associant un passage de texte faisant office de description détaillée ;
    • Il existe un lien ou un bouton adjacent permettant d’accéder à la description détaillée.
  6. 1.6.6
    Pour chaque image vectorielle (balise <svg>) porteuse d’information, ayant une description détaillée, la référence éventuelle à la description détaillée dans l’attribut WAI-ARIA aria-label et la description détaillée associée par l’attribut WAI-ARIA aria-labelledby ou aria-describedby sont-elles correctement restituées par les technologies d’assistance ?
  7. 1.6.7
    Chaque image bitmap (balise <canvas>), porteuse d’information, qui nécessite une description détaillée, vérifie-t-elle une de ces conditions ?
    • Il existe un attribut WAI-ARIA aria-label contenant l’alternative textuelle et une référence à une description détaillée adjacente ;
    • Il existe un attribut WAI-ARIA aria-labelledby associant un passage de texte faisant office d’alternative textuelle et un autre faisant office de description détaillée ;
    • Il existe un contenu textuel entre <canvas> et </canvas> faisant référence à une description détaillée adjacente à l’image bitmap ;
    • Il existe un contenu textuel entre <canvas> et </canvas> faisant office de description détaillée ;
    • Il existe un lien ou bouton adjacent permettant d’accéder à la description détaillée.
  8. 1.6.8
    Pour chaque image bitmap (balise <canvas>) porteuse d’information, qui implémente une référence à une description détaillée adjacente, cette référence est-elle correctement restituée par les technologies d’assistance ?
  9. 1.6.9
    Pour chaque image (balise <img>, <input> avec l’attribut type="image", <area>, <object>, <embed>, <svg>, <canvas>, ou possédant un attribut WAI-ARIA role="img") porteuse d’information, qui est accompagnée d’une description détaillée et qui utilise un attribut WAI-ARIA aria-describedby, l’attribut WAI-ARIA aria-describedby associe-t-il la description détaillée ?
  10. 1.6.10
    Chaque balise possédant un attribut WAI-ARIA role="img" porteuse d’information, qui nécessite une description détaillée, vérifie-t-elle une de ces conditions ?
    • Il existe un attribut WAI-ARIA aria-label contenant l’alternative textuelle et une référence à une description détaillée adjacente ;
    • Il existe un attribut WAI-ARIA aria-labelledby associant un passage de texte faisant office d’alternative textuelle et un autre faisant office de description détaillée ;
    • Il existe un attribut WAI-ARIA aria-describedby associant un passage de texte faisant office de description détaillée ;
    • Il existe un lien ou un bouton adjacent permettant d’accéder à la description détaillée.

Comment le vérifier

  1. Repérer les images dont l'alternative courte ne peut pas suffire : graphiques, cartes, plans, organigrammes, schémas de processus, infographies.
  2. Trancher par le propos de la page. Si elle fait dire à l'image des valeurs, des relations ou un enchaînement, la description détaillée est nécessaire ; sinon le critère est non applicable pour cette image.
  3. Chercher la description sous l'une des formes admises : attribut longdesc, texte adjacent signalé par l'alternative, lien ou bouton adjacent qui y mène, ou aria-describedby pour un SVG, un role="img" ou un <canvas>.
  4. Suivre le chemin jusqu'au bout : dérouler le bloc repliable, ouvrir la page dédiée, vérifier que l'identifiant visé par aria-describedby existe vraiment.
  5. Ne juger ici que la présence et l'accessibilité du chemin. La qualité du texte se prononce au 1.7.

Ce que notre outil fait

Jugement humain

Aucune machine ne tranche ce critère. L’outil vous présente les éléments et enregistre votre constat.

L'assistant pose deux questions par image porteuse d'information : « nécessite-t-elle une description détaillée ? », puis, si oui, « une description détaillée est-elle présente ? ». Il ne cherche ni longdesc, ni aria-describedby, ni lien adjacent — aucune de ces formes n'est détectée, les deux réponses sont les vôtres. Ce qu'il apporte : l'image et son alternative côte à côte, un bouton qui la met en évidence dans la page, et le sélecteur de l'élément, qui permet d'accrocher une capture d'écran à la non-conformité.

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 <figcaption> posé sous le graphique n'est pas une description détaillée tant que rien ne l'annonce : l'utilisateur qui n'a que l'alternative ignore qu'un texte l'attend plus bas.
  • longdesc est admis par le référentiel et ignoré par tous les navigateurs actuels. Conforme, donc, et inatteignable sans outil dédié : le noter conforme et le dire en commentaire vaut mieux que de choisir l'un des deux.
  • Un tableau de données transformé en image est le cas le plus fréquent, et le plus mal traité : mieux vaut le rétablir en vrai tableau (thématique 5) que d'en écrire la description.
  • Déclarer non conforme une image simple parce qu'aucune description longue n'existe est l'erreur d'audit la plus courante sur ce critère. « Si nécessaire » fait partie de l'énoncé.

À lire avec