RGAA Lab

RGAA 4.1.2 · Images · Critère 1.8

Chaque image texte porteuse d’information, en l’absence d’un mécanisme de remplacement, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée (hors cas particuliers) ?

Un texte en image ne se redimensionne pas sans flou, ne se recolore pas, ne se sélectionne pas et ne se traduit pas. Il pénalise d'abord des personnes qui voient : celle qui zoome à 200 %, celle qui impose sa feuille de style ou un mode à fort contraste, celle qui lit dans une autre langue. Une alternative correcte ne répare rien de cela — elle satisfait un autre critère.

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.8.1
    Chaque image texte (balise <img> ou possédant un attribut WAI-ARIA role="img") porteuse d’information, en l’absence d’un mécanisme de remplacement, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée (hors cas particuliers) ?
  2. 1.8.2
    Chaque bouton « image texte » (balise <input> avec l’attribut type="image") porteur d’information, en l’absence d’un mécanisme de remplacement, doit si possible être remplacé par du texte stylé. Cette règle est-elle respectée (hors cas particuliers) ?
  3. 1.8.3
    Chaque image texte objet (balise <object> avec l’attribut type="image/…") porteuse d’information, en l’absence d’un mécanisme de remplacement, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée (hors cas particuliers) ?
  4. 1.8.4
    Chaque image texte embarquée (balise <embed> avec l’attribut type="image/…") porteuse d’information, en l’absence d’un mécanisme de remplacement, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée (hors cas particuliers) ?
  5. 1.8.5
    Chaque image texte bitmap (balise <canvas>) porteuse d’information, en l’absence d’un mécanisme de remplacement, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée (hors cas particuliers) ?
  6. 1.8.6
    Chaque image texte SVG (balise <svg>) porteuse d’information et dont le texte n’est pas complètement structuré au moyen d’éléments <text>, en l’absence d’un mécanisme de remplacement, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée (hors cas particuliers) ?

Comment le vérifier

  1. Repérer les images contenant du texte : bandeaux promotionnels, boutons graphiques, tarifs, chiffres clés, citations mises en forme, infographies, texte incrusté sur une photo.
  2. Écarter les cas particuliers, qui sont énumérés par le référentiel : logo, dénomination commerciale, CAPTCHA, image-test, et image dont l'exactitude graphique est essentielle à ce qu'elle transmet. Le critère est alors non applicable pour cet élément.
  3. Chercher un mécanisme de remplacement : si la page permet d'obtenir la même information en texte stylé, le critère ne s'applique pas davantage.
  4. Pour ce qui reste, se demander si du texte stylé était techniquement possible. Il l'est presque toujours.
  5. Vérification concrète : zoomer à 200 %, puis essayer de sélectionner le texte. Ce qui devient flou et ne se sélectionne pas est une image texte.

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'outil ne lit pas le texte des images : pas de reconnaissance optique, aucune détection, et c'est un des rares critères où les outils automatiques les plus avancés n'apportent rien non plus. L'assistant se contente d'enchaîner deux questions sur chaque image porteuse d'information — « est-ce une image contenant du texte ? », puis « ce texte pourrait-il être remplacé par du texte stylé ? » — et écrit le verdict avec le sélecteur de l'image, ce qui permet d'y accrocher une capture. Une réserve à connaître : sur une page, l'assistant images ne présente que les images situées hors des liens et des boutons. Une bannière cliquable passe donc par les assistants liens et boutons, qui ne posent pas cette question — à examiner à part.

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.

  • Le cas particulier couvre le logo, pas le bandeau qui l'entoure : « -30 % jusqu'au 15 mars » posé à côté du logo est bien une image texte, et c'est le cas le plus courant.
  • Une image texte avec une alternative parfaite reste non conforme au 1.8. Les critères 1.1 et 1.3 sont satisfaits, le texte n'est toujours ni redimensionnable ni traduisible.
  • Le texte d'un SVG écrit en éléments text n'est pas concerné : c'est du texte réel, qui se recolore et se traduit. Le 1.8 ne vise le SVG que là où son texte est tracé en courbes.
  • Une capture d'écran ne figure pas dans la liste des cas particuliers. Elle n'y entre que si son exactitude graphique est essentielle — montrer une interface, oui ; citer un message d'erreur qu'on pouvait écrire, non.

À lire avec