Attribut alt : comment écrire une bonne alternative textuelle

L'attribut alt tient en quelques mots. Pourtant, presque personne ne l'écrit correctement, et c'est le premier reproche que remonte un audit.

Voici la règle, les exemples, et les cinq fautes que je retrouve sur chaque site.

Repérer mes images sans alternative

À quoi sert l'attribut alt

Il porte le texte que l'on entend, ou que l'on lit, quand l'image ne s'affiche pas.

Trois publics l'utilisent. Les personnes qui naviguent au lecteur d'écran. Celles dont la connexion échoue. Et les moteurs de recherche.

Ce dernier point mérite qu'on s'y arrête. Google lit cet attribut pour comprendre vos visuels et les classer dans la recherche d'images.

La seule règle qui compte

Décrivez la fonction de l'image, pas son apparence.

Posez-vous une question simple. Si je retire cette image, quelle information disparaît ?

Rien ne disparaît ? L'image est décorative, son alternative reste vide. Une information disparaît ? Écrivez-la.

Quatre situations, quatre alternatives

Type d'image	Ce qu'il faut écrire
Décorative	Une alternative vide, pour que le lecteur d'écran l'ignore
Informative	L'information portée par l'image, en une phrase courte
Cliquable	La destination du lien, pas la description du visuel
Contenant du texte	Le texte affiché sur l'image, mot pour mot

La troisième ligne surprend souvent. Prenez un logo qui ramène à l'accueil. La bonne alternative reste le nom du site, pas la description du dessin.

Des exemples concrets

Une photo d'illustration en haut d'article

Elle n'apporte aucune information nouvelle. Le titre juste à côté dit déjà tout.

Alternative correcte : vide. Écrire « photo d'illustration » ne fait qu'ajouter du bruit.

Un graphique de résultats

Ici, l'image porte l'information entière. Une alternative courte ne suffit pas.

Alternative correcte : la conclusion du graphique, en une phrase. Puis les données détaillées juste en dessous, en texte ou en tableau.

Une icône de téléphone à côté du numéro

Le numéro est déjà écrit en toutes lettres. L'icône décore.

Alternative correcte : vide. Sinon, le lecteur d'écran annonce deux fois la même chose.

Une photo de produit dans une boutique

Elle montre ce que le client achète. La couleur, la matière et la forme comptent.

Alternative correcte : le produit, sa couleur et sa particularité visible, sans reprendre le titre du produit affiché juste à côté.

Les cinq fautes les plus fréquentes

• Le nom du fichier : le lecteur d'écran énumère une suite de chiffres.
• « Image de » ou « photo de » : la nature est déjà annoncée par le lecteur d'écran.
• L'attribut alt bourré de mots-clés : inutile pour l'utilisateur, et repéré comme abus par Google.
• La même alternative partout : recopiée d'une image à l'autre, elle n'informe plus personne.
• L'attribut absent : le lecteur d'écran lit alors l'adresse complète du fichier.

La dernière faute reste la plus courante sur les sites gérés par leur propriétaire.

Alternative vide ou attribut absent : ce n'est pas pareil

Une alternative vide indique explicitement : cette image ne porte rien, ignore-la. Le lecteur d'écran passe son chemin, sans un mot.

Un attribut absent laisse l'outil deviner. Il annonce alors le nom du fichier, ou l'adresse complète.

Autrement dit, l'attribut alt doit toujours exister. C'est son contenu qui varie.

Le cas de WordPress

La médiathèque propose un champ d'alternative textuelle à chaque image. Il reste vide par défaut.

Attention à une confusion classique. Le champ « légende » s'affiche sous l'image pour tout le monde. Le champ « description » ne sert qu'à l'intérieur de la médiathèque. Seul le champ d'alternative joue le rôle décrit ici.

Prenez l'habitude de le remplir au moment de l'import. Rattraper cinq cents images plus tard coûte une journée entière.

L'attribut alt et le référencement

Google s'appuie sur cet attribut pour comprendre vos visuels. Une alternative juste améliore donc votre présence dans la recherche d'images.

Attention toutefois à l'excès inverse. Un attribut alt rempli de mots-clés empilés dessert les deux objectifs à la fois.

La bonne nouvelle : une alternative écrite pour un humain satisfait aussi le moteur. Il n'y a pas d'arbitrage à faire.

Combien de caractères écrire ?

Aucun texte n'impose de limite. En pratique, une phrase suffit presque toujours.

Si votre alternative dépasse deux lignes, l'information mérite d'exister en texte visible. Tout le monde y gagne, y compris votre référencement.

Par où commencer

Listez vos dix pages les plus visitées. Vérifiez leurs images, une par une.

Ensuite seulement, traitez le reste du site au fil de l'eau. Chaque nouvelle publication devient l'occasion de faire les choses correctement.

Pour situer ce critère dans le référentiel, consultez notre guide des critères RGAA. Et pour les autres manquements courants, lisez les quinze erreurs les plus fréquentes.

Lancer le dépistage gratuit

Dépistage automatique : il couvre environ 30 % des critères du référentiel. Il ne remplace pas un audit manuel et ne vaut pas attestation de conformité.

Un doute sur une image précise ? Envoyez-la nous, nous vous donnons l'alternative à écrire.

Références : tutoriel images du W3C et portail de l'accessibilité numérique de l'État.