Contrôler les textes alternatifs des images

Comment utiliser l’outil

Saisissez l’adresse d’une page publique et cliquez sur « Contrôler ». Le serveur de l’outil télécharge le code HTML de la page, en retire les balises img et ne renvoie que la liste des images, pas la page. Pour une page pas encore publiée, ou derrière une connexion, ouvrez « Coller du HTML » : l’analyse se fait alors dans votre navigateur et rien n’est envoyé.

Chaque ligne du tableau donne un aperçu de l’image, son adresse complète, l’état de l’attribut alt (absent, vide ou son texte), puis ce que l’outil a relevé : largeur et hauteur déclarées, attribut loading, format d’après l’extension du fichier, appartenance à une balise picture, lien qui entoure l’image. La dernière colonne porte les remarques. La case « Afficher seulement les images avec une remarque » masque les lignes sans alerte, et le bouton CSV exporte tout le tableau.

L’outil liste trois cents images au plus par page. Les outils de ce site acceptent vingt demandes par tranche de dix minutes et par visiteur, tous outils confondus.

Les remarques de l’outil

Chaque remarque s’appuie sur une documentation de Google ou du W3C, sauf deux règles que l’outil fixe lui-même et dit comme telles.

• Alt absent. L’image n’a pas d’attribut alt. Pour une image décorative, l’arbre de décision du W3C demande un alt vide ; pour une image qui apporte une information, un texte qui en rend le sens.² Sans attribut, aucune des deux choses n’est dite.
• Alt vide. L’outil le compte, sans le juger : un alt vide est la bonne réponse pour une image purement décorative, pour un texte qui n’est qu’un effet visuel et pour une image dont le contenu figure déjà dans le texte voisin.² Il vous revient de vérifier que ces images sont bien décoratives.
• Image dans un lien sans nom. Le lien ne contient aucun texte, n’a ni aria-label ni title, et l’image a un alt vide ou absent. Une image qui sert de contrôle doit avoir un nom qui décrit sa fonction.³
• Alt qui ressemble à un nom de fichier. « IMG_1234.jpg », « chat.jpg » ou le nom du fichier lui-même. Le W3C range les noms de fichier parmi les textes qui ne remplacent pas l’image.⁴
• Alt de remplissage. « image », « photo », « picture », « spacer » ou « photo 1 » : même échec, même source.⁴
• Même alt sur plusieurs images. Règle de l’outil : un texte identique sur des images différentes ne peut pas décrire chacune.
• Mot répété. Un mot de trois lettres ou plus qui revient trois fois dans le même alt. Google déconseille de remplir l’alt de mots-clés.¹ Il ne fixe aucun seuil : les trois occurrences sont un choix de l’outil, qui sert à repérer les cas flagrants.

Les dimensions, l’attribut loading et le format sont affichés sans verdict. Seule la documentation de Google sur le format est reprise : elle liste BMP, GIF, JPEG, PNG, WebP, SVG et AVIF et demande que l’extension du fichier corresponde à son type.¹

Alt vide ou alt absent

Les deux cas ne disent pas la même chose. Un alt absent laisse la question ouverte : on ne sait pas si l’auteur a oublié l’image ou l’a jugée sans intérêt. Un alt vide, écrit alt="", déclare que l’image est décorative et que les technologies d’assistance peuvent l’ignorer.

L’arbre de décision du W3C trie les images en cinq familles.² Une image décorative reçoit un alt vide. Une image informative reçoit une brève description de ce qu’elle apporte. Une image de texte reprend ce texte. Une image fonctionnelle, icône ou bouton, dit sa fonction, la destination ou l’action. Une image complexe, comme un graphique, reçoit un alt court et le détail de l’information ailleurs dans la page.

Le critère WCAG 1.1.1, de niveau A, exige un texte alternatif équivalent pour tout contenu non textuel, et prévoit que la pure décoration soit ignorée par les technologies d’assistance.³ Mettre un texte sur ces éléments gêne les utilisateurs de lecteurs d’écran. Choisir entre décorative et informative reste un jugement de l’auteur, qui dépend de la raison pour laquelle l’image figure sur la page.⁶ L’outil ne peut pas le faire à votre place.

Écrire un alt utile

Google demande un contenu riche en informations, qui utilise les mots-clés de façon appropriée et dans le contexte de la page.¹ Sa documentation donne quatre exemples : l’absence d’alt est un mauvais exemple, un alt rempli de mots-clés aussi, « puppy » est meilleur, et « Dalmatian puppy playing fetch » est le meilleur. Le bourrage de mots-clés dégrade l’expérience des utilisateurs et peut faire passer le site pour du spam.

Le W3C décrit l’alt d’une image informative comme une courte expression ou une phrase, sans fixer de limite en mots ni en caractères.⁶ Il précise aussi qu’il ne s’agit généralement pas d’une description littérale de l’image, mais de son sens dans la page. Une photo de produit n’a pas le même alt sur une fiche produit et dans un article de blog. L’outil n’affiche donc aucun verdict de longueur.

Google ajoute que les images doivent se trouver près d’un texte pertinent, sur une page dont le sujet correspond à celui de l’image.¹ Pour l’image de partage, la balise og:image:alt de l’Open Graph joue le même rôle ; le générateur de balises meta et Open Graph la prépare.

Une image dans un lien

Quand une image sert de lien, son alt devient le nom du lien. Google note que le texte alternatif sert alors d’ancre.¹ Le W3C pose une question simple : le lien serait-il difficile ou impossible à comprendre sans l’image ? Si oui, l’alt décrit la destination ou l’action. Si l’image répète un texte réel placé à côté, comme un logo suivi du nom de l’entreprise dans le même lien, l’alt reste vide.²

La technique H2 du W3C recommande de mettre l’icône et le texte dans un seul élément a, avec un alt vide sur l’image : le clavier et le lecteur d’écran ne rencontrent pas deux liens identiques côte à côte.⁵ L’outil ne signale donc pas un alt vide dans un lien qui contient du texte.

Ce que l’outil ne voit pas

L’outil lit le code HTML tel que le serveur l’envoie. Il ne voit pas les images ajoutées par JavaScript après le chargement, ni les images de fond en CSS, que le W3C cite comme alternative pour les images décoratives.² Les images inscrites dans le code en SVG, les canvas et les boutons de type image ne sont pas listés. Pour une page qui construit ses images côté navigateur, ouvrez les outils de développement, copiez le code HTML de la page rendue et collez-le dans « Coller du HTML ».

Pour les images à chargement différé, l’outil lit l’adresse dans src, puis dans data-src, data-lazy-src, data-original, et à défaut dans la première adresse de srcset. Il ne juge pas la qualité d’un alt : un texte correct pour la machine peut être à côté de la plaque, et seul un humain le voit. Le poids, les dimensions réelles et les métadonnées d’un fichier précis relèvent d’un autre outil, le lecteur de métadonnées d’image.

Questions fréquentes