L’attribut alt existe depuis 1993. C’est l’un des mécanismes d’accessibilité les plus anciens du web, et l’un des plus mal compris. On sait qu’il faut le remplir. On ne sait pas toujours pourquoi, ni ce qu’il fait concrètement pour les utilisateurs qui en dépendent.
Ce que le navigateur fait avec l’alt
Quand un navigateur rencontre une image, il cherche l’attribut alt. Ce qu’il en fait dépend du contexte.
Si alt contient du texte, ce texte est transmis à l’arbre d’accessibilité. Le lecteur d’écran l’annonce à la place de l’image. L’utilisateur entend une description au lieu de voir une image.
Si alt est vide (alt=""), le navigateur signale aux AT que l’image est décorative. Le lecteur d’écran l’ignore complètement, comme si l’image n’existait pas.
Si alt est absent, comportement imprévisible selon l’AT. NVDA peut annoncer le nom du fichier (cropped-80URG4655.jpg). VoiceOver peut annoncer “image”. JAWS peut ignorer ou annoncer l’URL. Aucun de ces comportements n’est utile.
Trois scénarios concrets
Scénario 1 : Le lecteur d’écran face à l’image sans alt
Paul est aveugle depuis l’adolescence. Il utilise NVDA + Firefox pour naviguer quotidiennement. Il consulte le site de sa mairie pour vérifier les horaires de la déchetterie.
En navigant dans la page, NVDA annonce : “graphique cropped-80URG4655.jpg”. Puis : “graphique mairie-facade-2024-web.jpg”. Puis : “graphique logo-marianne.png”.
Paul ne sait pas si ces images portent une information utile, les noms de fichiers ne disent rien. Il ne peut pas savoir qu’il s’agit d’une photo de la façade de la mairie, du logo de la commune, et d’une bannière décorative. Il tabule plus loin et espère trouver l’information dans le texte.
Si les images avaient eu des alt corrects, NVDA aurait annoncé “Façade de la mairie de Nom_ville”, puis ignoré la bannière décorative (alt=""), puis annoncé “Logo Marianne – République Française”. En dix secondes, Paul aurait eu une lecture complète de la page.
Scénario 2 : L’image qui porte la seule information disponible
Le site d’une commune publie un plan de la ville en image. L’image n’a pas d’alt. Sous l’image, aucun texte alternatif, aucun lien vers une version accessible.
Pour un utilisateur de lecteur d’écran, cette information n’existe pas. Pour un utilisateur qui navigue sur une connexion lente et dont les images ne se chargent pas, le texte alternatif, s’il existait, s’afficherait à la place. Pour un utilisateur qui a désactivé les images dans son navigateur pour économiser sa data mobile, même chose.
L’absence d’alt ne touche pas uniquement les lecteurs d’écran. Elle touche quiconque n’accède pas à l’image pour quelque raison que ce soit.
Scénario 3 : L’alt présent mais inutile
Un bulletin municipal en PDF est mis en ligne. L’image de couverture a un alt, mais il dit "image001". C’est le nom généré automatiquement par l’outil de conversion PDF.
NVDA annonce “image001, graphique”. C’est pire qu’un alt absent dans certains cas : l’utilisateur entend quelque chose, s’attend à une information, et reçoit un nom de fichier sans signification. Le faux sentiment de conformité,l’alt est rempli, masque le problème réel.
Qui est affecté, et dans quelles proportions
Les utilisateurs de lecteurs d’écran : entre 250 000 et 300 000 personnes en France selon les estimations. Ce sont les utilisateurs les plus directement affectés par les alt manquants ou incorrects.
Les utilisateurs malvoyants qui utilisent le zoom : ils voient les images mais peuvent avoir du mal à lire le texte qu’elles contiennent (infographies, captures d’écran de documents). Un alt descriptif complète ce qu’ils perçoivent partiellement.
Les utilisateurs avec des connexions lentes ou des images désactivées : l’alt s’affiche à la place de l’image quand celle-ci ne se charge pas. Sur les zones rurales avec une couverture réseau limitée, ce n’est pas marginal.
Les moteurs de recherche : les moteurs lisent l’alt pour comprendre le contenu des images. Un alt pertinent contribue au référencement. C’est un argument supplémentaire pour les propriétaires de sites qui ne sont pas sensibles aux arguments d’accessibilité seuls.
Ce que le RGAA exige
Trois critères couvrent les alternatives textuelles des images.
Critère 1.1 : Chaque image porteuse d’information a-t-elle une alternative textuelle ?
C’est le critère fondamental. Toute image qui transmet une information doit avoir un alt qui transmet cette même information. Si retirer l’image appauvrit le contenu de la page, l’image est porteuse d’information et doit avoir un alt.
Critère 1.2 : Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Les images purement décoratives, qui n’ajoutent aucune information au contenu, doivent être masquées aux AT. L’alt="" est le mécanisme standard. Sans lui, le lecteur d’écran annonce l’image inutilement, alourdit la navigation et noie les informations réelles dans du bruit.
Critère 1.3 : Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente ?
Avoir un alt ne suffit pas. Il doit être juste. Un alt="image", un alt="photo", un alt="photo-mairie-2024-v2-final.jpg", ces valeurs existent dans le code, passent certains outils automatiques, et ne servent à rien.
L’alt n’est pas une case à cocher
La tentation est grande de traiter l’alt comme une formalité d’audit : remplir le champ, passer au critère suivant. C’est une erreur de cadrage.
L’alt est une traduction. Il traduit une information visuelle en information textuelle. Comme toute traduction, il peut être fidèle, approximatif, ou complètement à côté. Un audit qui vérifie la présence de l’alt sans en évaluer la pertinence ne mesure pas l’accessibilité, il mesure la conformité de surface.
La question à se poser pour chaque image n’est pas “est-ce que j’ai un alt ?” mais “est-ce qu’un utilisateur qui n’a accès qu’au texte reçoit la même information qu’un utilisateur qui voit l’image ?”
C’est l’objectif des deux articles suivants : d’abord distinguer les images qui ont besoin d’un alt de celles qui n’en ont pas, puis apprendre à rédiger des alt pertinents selon le type d’image.