RGAA Lab

RGAA 4.1.2 · Images · Critère 1.1

Chaque image porteuse d’information a-t-elle une alternative textuelle ?

Une image sans alternative n'existe pas pour qui ne la voit pas : ni pour un lecteur d'écran, ni quand elle ne se charge pas, ni pour un moteur de recherche.

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.1.1
    Chaque image (balise <img> ou balise possédant l’attribut WAI-ARIA role="img") porteuse d’information a-t-elle une alternative textuelle ?
  2. 1.1.2
    Chaque zone d’une image réactive (balise <area>) porteuse d’information a-t-elle une alternative textuelle ?
  3. 1.1.3
    Chaque bouton de type image (balise <input> avec l’attribut type="image") a-t-il une alternative textuelle ?
  4. 1.1.4
    Chaque zone cliquable d’une image réactive côté serveur est-elle doublée d’un mécanisme utilisable quel que soit le dispositif de pointage utilisé et permettant d’accéder à la même destination ?
  5. 1.1.5
    Chaque image vectorielle (balise <svg>) porteuse d’information, vérifie-t-elle ces conditions ?
    • La balise <svg> possède un attribut WAI-ARIA role="img" ;
    • La balise <svg> a une alternative textuelle.
  6. 1.1.6
    Chaque image objet (balise <object> avec l’attribut type="image/…") porteuse d’information, vérifie-t-elle une de ces conditions ?
    • La balise <object> possède une alternative textuelle et un attribut role="img" ;
    • L’élément <object> est immédiatement suivi d’un lien ou bouton adjacent permettant d’accéder à un contenu alternatif ;
    • Un mécanisme permet à l’utilisateur de remplacer l’élément <object> par un contenu alternatif.
  7. 1.1.7
    Chaque image embarquée (balise <embed> avec l’attribut type="image/…") porteuse d’information, vérifie-t-elle une de ces conditions ?
    • La balise <embed> possède une alternative textuelle et un attribut role="img" ;
    • L’élément <embed> est immédiatement suivi d’un lien ou bouton adjacent permettant d’accéder à un contenu alternatif ;
    • Un mécanisme permet à l’utilisateur de remplacer l’élément <embed> par un contenu alternatif.
  8. 1.1.8
    Chaque image bitmap (balise <canvas>) porteuse d’information, vérifie-t-elle une de ces conditions ?
    • La balise <canvas> possède une alternative textuelle et un attribut role="img" ;
    • Un contenu alternatif est présent entre les balises <canvas> et </canvas> ;
    • L’élément <canvas> est immédiatement suivi d’un lien ou bouton adjacent permettant d’accéder à un contenu alternatif ;
    • Un mécanisme permet à l’utilisateur de remplacer l’élément <canvas> par un contenu alternatif.

Comment le vérifier

  1. Recenser toutes les images de la page, y compris celles posées en CSS si elles portent de l'information.
  2. Pour chacune, se demander : si je la retire, la page perd-elle quelque chose ? Si oui, elle est porteuse d'information.
  3. Vérifier que chaque image porteuse d'information a bien une alternative — alt, aria-label, aria-labelledby, ou <title> pour un SVG.
  4. Une alternative vide sur une image porteuse d'information est une non-conformité, pas une absence de réponse.

Ce que notre outil fait

Détecté automatiquement

Notre moteur tranche seul sur ce critère : un échec est une non-conformité, avec la preuve qui va avec.

Le moteur détecte l'absence de nom accessible sur les images, boutons-images, SVG à rôle explicite et objets. Il ne juge pas si l'image porte de l'information : c'est vous qui le dites, et l'outil vous pose la question élément par élément.

Règles ACT du W3C mises en œuvre : 23a2a8, 59796f, 7d6734, 8fc3b6

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.

  • alt absent et alt="" ne veulent pas dire la même chose. Le premier est une omission, le second une déclaration : « cette image est décorative ». Un alt absent sur une image décorative reste une non-conformité.
  • Un SVG décoratif doit porter aria-hidden="true", pas seulement un <title> vide.
  • Une image dans un lien sans autre texte porte l'intitulé du lien : son alternative doit décrire la destination, pas l'image.

À lire avec