Le texte alternatif des images

Une arabesque décorative et un graphique de ventes utilisent tous deux l'élément img, mais le bon texte alternatif est une chaîne vide pour la première et une phrase complète pour le second.

À quoi sert le texte alternatif

Un lecteur d'écran transforme une page en parole ou en braille. Quand il arrive à une image, il ne peut pas regarder les pixels : il lit donc l'attribut alt à la place. Ce même texte s'affiche quand une image ne se charge pas, et c'est ce que reçoivent un moteur de recherche ou un navigateur en mode texte. Les WCAG 2.2 placent cela en tout premier : le critère de succès 1.1.1 Contenu non textuel, de niveau A, demande que chaque image, icône ou graphique qui porte une information ait une alternative textuelle qui remplit la même fonction.

Les mots clés sont « la même fonction ». Le texte alternatif n'est ni une légende ni la liste de tout ce qui se trouve dans l'image. Demande-toi ce qu'un lecteur voyant retire de l'image à cet endroit, puis écris-le. La photo d'une miche sur la page d'accueil d'une boulangerie n'a peut-être besoin que de « Miche au levain, tranchée ». La même photo dans un article sur la couleur de la croûte aurait besoin de « Miche au levain à la croûte sombre, presque noire, et à la mie alvéolée ». Même fichier, rôle différent, texte différent.

Quatre cas courants

Le tutoriel du W3C sur les images classe la plupart des images en quelques groupes. Les images informatives, comme une photo ou un schéma simple, reçoivent une courte description de ce qu'elles montrent. Les images décoratives, comme une ligne de séparation ou une texture de fond, reçoivent un alt vide, écrit alt="", qui indique aux technologies d'assistance de les ignorer. Les images fonctionnelles, comme un logo qui renvoie à l'accueil ou une loupe qui lance une recherche, reçoivent un texte qui dit ce qui se passe : « Accueil de Corner Bakery » ou « Rechercher », et non « logo » ou « loupe ». Les images de texte reçoivent les mots de l'image.

Omettre l'attribut n'équivaut pas à le laisser vide. Sans aucun alt, certains lecteurs d'écran se rabattent sur la lecture du nom du fichier : l'auditeur peut alors entendre quelque chose comme « IMG tiret bas 4032 point jpeg ». Un alt vide est un choix délibéré qui dit « rien à voir ici ». Pour un graphique complexe, garde un alt court (« Diagramme en barres des ventes mensuelles, décrit ci-dessous ») et place les nombres dans un tableau ou un paragraphe à côté, où tout le monde peut les lire.

Les images qui ne sont pas des éléments img

Les images peuvent aussi arriver sous forme de SVG en ligne ou d'images de fond CSS. Un fond CSS n'a aucun emplacement pour un texte alternatif : il ne doit donc servir qu'à la décoration ; tout ce qui porte un sens doit être dans le HTML. Un svg en ligne purement décoratif peut être masqué avec aria-hidden="true", que l'unité 6 explique. Les WCAG ne fixent aucune limite de caractères pour le texte alternatif, mais le tutoriel du W3C revient toujours au même conseil : sois bref et donne ce qui compte dans ce contexte. Si tu te retrouves à écrire trois phrases, le contenu a probablement sa place dans le texte de la page, où tout le monde peut le lire.

Tu peux vérifier tes propres pages sans logiciel spécial. Affiche le code source de la page et cherche <img : chaque résultat doit avoir un attribut alt, vide ou non. Les outils de développement des principaux navigateurs comprennent aussi un panneau d'accessibilité qui montre le nom finalement attribué à chaque image. Lire ces noms à la suite, hors contexte, est un bon test. Si une liste dit « image, image, graphique, logo », c'est exactement ce qu'entend un utilisateur de lecteur d'écran.