Attribut Alt des images

L'attribut alt fait partie de ces sujets où la version SEO du conseil a fini par écraser la raison d'être de la chose. On lit partout qu'il faut y placer son mot-clé, rarement qu'il s'agit du texte lu à voix haute par un lecteur d'écran à des personnes qui n'accèdent pas au visuel. Or c'est en écrivant pour elles qu'on écrit correctement pour Google.

Les trois fonctions, et leur ordre

L'accessibilité. Un lecteur d'écran énonce l'attribut alt à la place de l'image. C'est la fonction d'origine, et c'est celle qui dicte la façon d'écrire. Une description utile permet de suivre la page ; une suite de mots-clés la rend incompréhensible.

La compréhension par le moteur. Google indique explicitement se servir de l'attribut alt, avec le nom du fichier et le texte environnant, pour comprendre le sujet d'une image. Il pèse dans le calcul aux côtés de plusieurs autres signaux, sans le décider à lui seul.

Le repli. Quand l'image ne charge pas, c'est le texte alternatif qui s'affiche à sa place. Fonction mineure aujourd'hui, mais elle rappelle que ce texte doit tenir seul.

Comment l'écrire

Décrivez l'image comme si vous la décriviez à quelqu'un au téléphone, avec les mêmes mots et la même longueur.

Un attribut alt vide fonctionne comme une instruction, et non comme un oubli. Il dit au lecteur d'écran de passer l'image sans l'annoncer, ce qui est exactement le comportement souhaité pour un élément décoratif. Omettre l'attribut, à l'inverse, laisse le lecteur d'écran énoncer le nom du fichier, ce qui produit des lectures absurdes.

Alt, title, légende et nom de fichier

Quatre éléments coexistent autour d'une image, et ils sont régulièrement confondus.

La légende est celle que je recommande le plus souvent d'ajouter, parce qu'elle est lue par les visiteurs et qu'elle donne du contexte à l'image dans le texte de la page. Le nom du fichier vient ensuite, et il se traite au moment du téléversement, jamais après.

Les erreurs que je corrige le plus souvent

Le même alt sur des centaines d'images. C'est le défaut le plus fréquent sur les sites sous CMS, où un gabarit recopie le titre de la page dans l'attribut de chaque visuel. Le site affiche alors un taux de couverture parfait dans les audits, sans qu'aucune image ne soit réellement décrite.

L'alt qui décrit la fonction plutôt que l'image. Sur un bouton en image, l'alt doit dire ce que fait le bouton, pas ce que représente l'icône. Une flèche dans un carrousel se décrit par « image suivante », pas par « flèche vers la droite ».

Les préfixes inutiles. Commencer par « image de » ou « photo de » ajoute un mot que le lecteur d'écran énonce alors qu'il vient déjà d'annoncer qu'il s'agit d'une image.

L'alt sur les images d'arrière-plan. Une image posée en fond par une règle de style n'a pas d'attribut alt, puisqu'il n'y a pas de balise image. C'est aussi la raison pour laquelle un visuel porteur d'information ne doit jamais être placé en arrière-plan, où il devient invisible pour les moteurs comme pour les lecteurs d'écran.

Trois contextes qui changent la règle

La consigne générale suffit dans la plupart des cas. Trois contextes demandent un traitement particulier, et ce sont ceux où je vois le plus d'hésitation.

Les fiches produit. Une même référence photographiée sous six angles n'appelle pas six fois le même texte. On décrit ce que montre chaque prise de vue : la face avant, le détail de la fixation, le produit en situation. C'est plus long à écrire, et c'est aussi ce qui permet à ces images d'apparaître sur des requêtes différentes en recherche d'images.

Les graphiques et les tableaux en image. Un attribut alt ne peut pas porter la lecture d'un graphique complexe. La bonne pratique consiste à donner dans l'attribut la conclusion que le graphique illustre, et à détailler les données dans le texte de la page ou dans un tableau accessible juste en dessous. Aucun moteur ne lit les chiffres inscrits dans une image, quand le texte de la page s'indexe intégralement.

Les images de personnes. Sur une page équipe ou une page auteur, l'attribut alt contient le nom de la personne et sa fonction. C'est ce qui relie le visage à l'entité nommée dans le texte, et cela participe des signaux d'identification que je décris sur ma page consacrée à l'E-E-A-T.

Auditer un site entier sans y passer la semaine

1. Crawler le site. Un outil de parcours liste toutes les images et signale trois états : attribut absent, attribut vide, attribut renseigné.
2. Trier par occurrence. Regrouper les alt identiques. Un même texte qui revient deux cents fois désigne un gabarit à corriger, et une correction unique règle deux cents cas.
3. Isoler les images dans des liens. Ce sont les plus urgentes, puisqu'elles conditionnent le maillage interne.
4. Traiter les pages qui apportent du trafic. Le reste peut attendre le passage suivant. Une image sur une page sans visiteur n'est une urgence pour personne.
5. Vérifier les attributs vides. Ils sont corrects sur les éléments décoratifs, fautifs sur les visuels de contenu. C'est le seul point qui demande un œil humain.

Cette méthode transforme un chantier apparemment interminable en une demi-journée sur la plupart des sites, parce que l'essentiel des défauts vient de trois ou quatre gabarits et non de milliers de décisions individuelles.

Ce que les moteurs génératifs en font

Une remarque qui n'avait pas lieu d'être il y a deux ans. Les robots qui alimentent les réponses génératives lisent le HTML brut et n'analysent pas les images. Pour eux, une illustration n'existe qu'à travers son attribut alt, sa légende et le texte qui l'entoure.

Sur une page dont la démonstration repose sur un visuel, une part du raisonnement leur échappe donc entièrement. Écrivez quelque part dans le texte ce que l'image démontre, ne serait-ce qu'en une phrase, et vos lecteurs pressés y gagneront autant que les robots.

Cette contrainte rejoint celle de l'accessibilité, et c'est une bonne nouvelle. Le travail fait pour une personne qui n'accède pas au visuel sert exactement aux mêmes fins pour une machine qui ne le regarde pas.

Questions fréquentes