Attribut alt

L'attribut alt se place dans l'élément <img>, à côté de l'adresse de l'image. Son contenu prend la place de l'image lorsqu'elle ne peut pas être vue : lecteur d'écran utilisé par une personne aveugle ou malvoyante, image qui ne se charge pas, navigation avec les images désactivées.

<img src="dalmatien.jpg" alt="Chiot dalmatien qui rapporte une balle">

On parle souvent de « balise alt », mais c'est un abus de langage : alt est un attribut de la balise img, pas une balise en soi.

À quoi il sert pour Google

Google comprend le sujet d'une image en croisant plusieurs sources : des algorithmes de vision par ordinateur, le contenu de la page et le texte alternatif. Sa documentation sur le référencement des images présente l'attribut alt comme l'attribut le plus important pour fournir des métadonnées sur une image. Un bon texte alternatif aide donc le moteur à interpréter l'image, y compris pour Google Images, et renforce la cohérence entre l'image et le texte qui l'entoure.

Il a un second rôle, moins connu. Quand une image sert de lien, Google utilise son texte alternatif comme ancre de lien. Un logo cliquable ou un bouton en image sans attribut alt équivaut alors à un lien sans texte, qui ne dit rien de la page de destination.

Bons et mauvais exemples

Google illustre la question avec une gradation, reprise ici en français :

Code	Verdict
<img src="chiot.jpg">	À éviter : aucun texte alternatif.
alt="chiot chien petit chien chiot à vendre nourriture pour chiot pas chère"	À éviter : suite de mots-clés.
alt="chiot"	Mieux, mais peu précis.
alt="Chiot dalmatien qui rapporte une balle"	Recommandé : court et descriptif.

Le deuxième exemple relève du bourrage de mots-clés. Google prévient que remplir les attributs alt de mots-clés peut faire considérer le site comme du spam.

Le cas des images décoratives

Toutes les images ne portent pas d'information. Un filet de séparation, une illustration d'ambiance ou une icône placée à côté d'un texte qui dit déjà la même chose n'ont pas besoin d'être décrits. Le W3C recommande alors un attribut vide, alt="", pour que les technologies d'assistance ignorent l'image.

Vide ne veut pas dire absent. Sans attribut du tout, certains lecteurs d'écran annoncent le nom du fichier, du type « IMG_4521.jpg », ce qui gêne la lecture. Seul l'auteur de la page peut juger si une image est informative ou décorative, selon la raison de sa présence.

Ce que l'attribut alt ne couvre pas

Les images d'arrière-plan définies en CSS ne sont pas indexées par Google et ne peuvent pas porter d'attribut alt. Une image porteuse de sens doit donc être intégrée avec un élément <img>. Pour un graphique SVG intégré directement dans le code, l'équivalent du texte alternatif est l'élément <title> placé dans le SVG.

Rédiger un bon texte alternatif

La meilleure méthode consiste à se demander ce qu'une personne qui ne voit pas l'image doit savoir pour suivre la page. Quelques repères aident :

• décrire ce que montre l'image dans son contexte, en une phrase courte ;
• éviter « image de » ou « photo de », que les lecteurs d'écran rendent superflus en annonçant déjà une image ;
• pour une image-lien, décrire la destination plutôt que l'apparence, par exemple « Accueil » suivi du nom du site pour un logo ;
• ne pas reprendre le même texte pour toutes les images d'une page.

Le mot-clé de la page peut figurer dans le texte alternatif s'il décrit vraiment l'image. Il n'a rien à y faire dans le cas contraire. Le travail sur les textes alternatifs fait partie du SEO on-page, mais il sert d'abord l'accessibilité : c'est là que se trouve son bénéfice le plus certain.