Attribut alt : définition et SEO de vos images

Attribut alt : définition, rôle pour l'accessibilité et le SEO, syntaxe dans la balise img, exemples concrets et erreurs à éviter sur vos images.

Attribut alt : définition du texte alternatif d'une image

L'attribut alt est un attribut HTML qui fournit un texte alternatif à l’image affichée sur une page. Concrètement, c'est une courte description écrite dans le code, juste à côté du nom du fichier. En anglais, on parle d'alt text. Image après image, ce texte prend le relais quand le visuel n'est pas vu : par une personne aveugle, par un navigateur qui échoue à charger le fichier, ou par un robot d'indexation.

Pourquoi ce texte est dit « alternatif »

Le mot alternatif annonce la couleur : il s'agit d'une solution de repli. L'attribut ne remplace pas le fichier graphique au quotidien, il prend sa place quand l'affichage échoue. Prenez une connexion qui lâche en plein chargement d'une image. Le texte s'affiche alors à l'endroit prévu, plutôt qu'un cadre gris et muet. C'est la même idée qu'un sous-titre pour quelqu'un qui n'entend pas la bande-son.

Un attribut, pas une balise

La confusion revient souvent dans les comptes rendus techniques. img est une balise, alt est un attribut de cette balise, au même titre que src ou width. On ne devrait donc pas parler de « balise alt », même si l'usage a installé l'expression. La nuance compte dès que vous relisez un audit SEO ou que vous briefez un développeur.

À quoi sert l'attribut alt d'une image

Un texte alternatif bien écrit travaille sur trois fronts en même temps : l'accessibilité, le référencement et la solidité de la page. Peu d'éléments aussi discrets rendent autant de services. D'où son statut : un détail essentiel, pas une case à cocher la veille de la mise en ligne.

L'accessibilité des contenus visuels

Les personnes malvoyantes naviguent avec des lecteurs d'écran. Ces logiciels lisent la page à voix haute et, pour chaque visuel, ils annoncent le texte alternatif. Sans lui, l'utilisateur entend « image » ou un nom de fichier incompréhensible, ce qui n'apporte aucune information. L'accessibilité n'est pas un sujet de niche : elle améliore l'expérience des utilisateurs sur mobile, au clavier et en connexion lente.

Le référencement de vos visuels

Les robots de Google ne regardent pas une photo comme vous. Ils rapprochent l'image et son environnement immédiat : le nom du fichier, la légende, le paragraphe voisin et surtout la description alternative. C'est ce qui permet à un visuel de remonter dans Google Images, un canal d'acquisition souvent laissé de côté en référencement naturel. Sur une fiche produit, cette description aide aussi le moteur de recherche à relier la photo à une requête d'achat.

Un filet de sécurité technique

Un fichier renommé, un chemin cassé, un réseau capricieux : l'affichage peut échouer pour mille raisons. Quand l'image ne s'affiche pas, la description écrite sauve la lecture de la page. Pour un dirigeant, l'enjeu est très concret : un visiteur qui comprend ce qu'il rate continue sa visite, un visiteur face à un rectangle gris s'en va.

Comment fonctionne l'attribut alt dans la balise img

La syntaxe tient sur une ligne. Dans la balise img, on écrit d'abord src avec le chemin du fichier, puis alt avec la description entre guillemets. L'attribut doit être présent sur chaque visuel du site, et son contenu se rédige à la main, visuel par visuel. Une génération en série produit des textes interchangeables, donc inutiles.

src="fauteuil-ergonomique.jpg" indique au navigateur où trouver le fichier.
alt="fauteuil de bureau ergonomique noir, vu de trois quarts" indique ce que le fichier montre.
Pour une identité visuelle : alt="logo de l'agence, un A stylisé en bleu".
Pour un graphique : résumez l'information portée par la courbe, pas sa forme.
Pour une image purement décorative : laissez la valeur vide, alt="".

Où renseigner l'attribut alt dans WordPress

Sur WordPress, aucune ligne de code à écrire. Dans la médiathèque, chaque fichier dispose d'un champ « Texte alternatif » : ce que vous tapez là devient l'attribut alt dans le code de la page. L'éditeur de blocs propose le même champ dans les réglages du visuel sélectionné. Les autres CMS suivent la même logique, avec un libellé un peu différent.

Un message revient dans les extensions de référencement : « l'attribut alt de cette image est vide ». Ce n'est pas une erreur bloquante, c'est un rappel. À vous de trancher : soit la description manque vraiment, soit le visuel est décoratif et le vide est volontaire.

Comment écrire un texte alternatif pertinent

Un bon texte alternatif passe un test simple : lue sans voir l'écran, la phrase doit suffire à comprendre. L'idée n'est pas de fournir une légende littéraire, mais une information exploitable : visez une description concise, de l'ordre d'une ligne. Les lecteurs d'écran n'aiment pas les tirades, et certains outils tronquent les valeurs trop longues : le nombre de caractères utile reste modeste.

Décrire l'image, pas l'habiller de mots-clés

L'objectif est de décrire l’image telle qu'elle est. Si le mot-clé de la page apparaît naturellement dans cette description, tant mieux. S'il n'a aucun rapport avec le visuel, ne le forcez pas : un empilement de requêtes séparées par des virgules est repéré depuis longtemps par les moteurs, et il rend l'écoute pénible. Une description pertinente vaut mieux que dix mots-clés entassés.

Les cas particuliers à connaître

Si l'image contient du texte, une accroche ou un prix, reprenez ce texte dans la valeur de l'attribut.
Pour un visuel cliquable, décrivez la destination du lien plutôt que le dessin du bouton.
Pour un logo, le nom de la marque suffit, parfois accompagné de sa fonction dans la page.
Pour une capture d'écran, donnez l'information affichée, pas la liste des boutons.
Pour les images purement décoratives, un attribut vide est la bonne réponse.

L'attribut alt vide : un choix, pas un oubli

Un attribut vide n'est pas un attribut absent, et la différence est importante. Les visuels purement décoratifs — un trait de séparation, une texture de fond, une icône qui double un libellé déjà écrit — n'ajoutent rien au contenu de la page. Avec une valeur vide, le lecteur d'écran saute l'élément en silence, ce qui respecte le rôle réel de l'image. Si l'attribut alt est carrément absent, en revanche, certains logiciels se rabattent sur l'URL et lisent le nom du fichier caractère par caractère.

Attribut alt et attribut title : quelle différence

L'attribut title affiche une infobulle au survol de la souris. Sa fonction n'est pas celle de l'attribut alt : l'un ajoute un complément visible au survol, l'autre fournit un équivalent textuel du contenu de l'image. Cet attribut title n'est pas lu de façon fiable par les lecteurs d'écran, et il n'existe tout simplement pas au doigt sur mobile.

Recopier le texte alt dans un attribut title n'apporte donc rien : l'information devient redondante et le survol répète ce que la page dit déjà. Gardez le title pour les rares précisions utiles, un crédit photo par exemple. Et ne le confondez pas avec la balise title de la page, qui n'a aucun rapport : comme pour la balise h1, chaque élément du code a son rôle et on évite de le dupliquer.

Les erreurs courantes à éviter sur vos images

La plupart des sites ne souffrent pas d'un problème exotique, mais de six ou sept négligences qui se répètent sur des centaines de visuels. Les voici, dans l'ordre où nous les rencontrons en audit.

Laisser le nom du fichier tel quel : IMG-4821 ne décrit rien et ne sert personne.
Copier la même description sur tous les visuels d'une page, par confort.
Commencer par « image de » ou « photo de » : le lecteur d'écran annonce déjà la nature de l'élément.
Enchaîner des mots-clés sans phrase, dans l'espoir d'un gain de position.
Oublier l'attribut sur les visuels injectés par un thème, un carrousel ou une extension.
Utiliser une image pour afficher un texte important sans reprendre ce texte dans l'attribut.

Dernier réflexe utile : traitez le sujet par lots. Sur un site vitrine de quelques dizaines de pages, la reprise complète des textes alternatifs demande une demi-journée. Sur un catalogue de plusieurs milliers de références, c'est un chantier à cadrer, en commençant par les pages qui rapportent. C'est l'un des premiers points que nous regardons au démarrage d'une mission de référencement SEO : un gain discret, mais durable.

Questions fréquentes

C'est l'attribut de la balise img qui contient le texte alternatif du visuel. Il décrit en une ligne ce que montre le fichier, pour les lecteurs d'écran, pour les robots des moteurs et pour les navigateurs en cas d'échec d'affichage. En anglais, le terme courant est alt text.

L'attribut lui-même doit être présent sur chaque balise img : c'est la règle du HTML. En revanche, le remplir avec du texte n'est pas obligatoire, non : pour un visuel décoratif, la bonne pratique est une valeur vide. Autrement dit, l'attribut est toujours là, sa description dépend du rôle de l'élément.

Ouvrez la médiathèque, sélectionnez le fichier et remplissez le champ « Texte alternatif » avec une description courte et pertinente. Si le visuel ne porte aucune information, laissez le champ vide en conscience : l'alerte de votre extension n'est qu'un signalement. Et vérifiez les visuels ajoutés par le thème, qui échappent souvent à la médiathèque.