Comment ajouter une description d'image (text alternatif)

Qu'est-ce qu'un texte alternatif ?

Le texte alternatif (attribut « alt ») est un attribut ajouté à la balise <img> qui décrit en mots le contenu de l'image : <img src="..." alt="...">. Lorsqu’une image ne peut pas être chargée (connexion lente, chemin d’accès au fichier incorrect), il s’affiche à sa place dans le navigateur ; il est également lu à voix haute par les lecteurs d'écran pour les utilisateurs malvoyants et permet aux moteurs de recherche de comprendre ce que représente l'image, car Google ne « voit » pas l'image au niveau des pixels : il se fie principalement au texte environnant et à l'attribut alt.

Le texte alternatif sert un objectif totalement différent de celui du nom de fichier de l’image (par ex. IMG_2031.jpg) : le nom de fichier est destiné au serveur ou au système de fichiers, tandis que le texte alternatif sert à transmettre du sens. Il ne faut pas confondre les deux.

La balise « alt » et la légende (caption) qui apparaît sous l’image sont également deux choses distinctes : la légende est un texte visible par tous sur la page, tandis que la balise « alt » est normalement invisible et n’apparaît que lorsque l’image ne peut pas être chargée ou lorsqu’elle est consultée par un lecteur d’écran. Cette distinction est souvent confondue.

Dans certains environnements de développement, laisser l’attribut « alt » vide peut passer la validation HTML, mais cette validité technique ne signifie pas que l’attribut « alt » a réellement un sens ; l’outil de validation vérifie uniquement la présence ou non de l’attribut, et non la qualité de son contenu.

Pourquoi est-ce important ?

Le texte alternatif est essentiel tant pour l’accessibilité que pour le référencement des images (SEO). Lorsque les utilisateurs malvoyants naviguent sur une page à l’aide d’un lecteur d’écran, ils découvrent le contenu de l’image grâce à son texte alternatif ; si ce texte fait défaut, le lecteur d’écran se contente généralement de lire « image » ou le nom du fichier, ce qui entraîne une perte d’information. Dans certains pays, l’accessibilité peut également constituer une obligation légale.

Quant aux moteurs de recherche, comme ils ne peuvent pas « voir » directement le contenu des images, ils classent la page dans les résultats de recherche d’images (Google Images) en se basant sur la légende. Sur les sites de commerce électronique, ajouter une légende appropriée aux images de produits peut augmenter le trafic supplémentaire provenant de Google Images. Une légende manquante nuit à la fois à l’expérience utilisateur et au trafic issu de la recherche d’images.

Lorsqu’une image se charge lentement sur une connexion lente ou ne se charge pas du tout, la légende est la seule source d’information permettant à l’utilisateur de comprendre ce à quoi il doit s’attendre à cet endroit ; cela rend la légende importante non seulement pour le référencement naturel (SEO), mais aussi pour l’accessibilité générale.

Comment y remédier ?

Rédigez une balise alt courte et descriptive pour chaque image significative.
Pour les images purement décoratives (par exemple, une image d’arrière-plan), alt="" , faites en sorte que le lecteur d'écran ignore l'image ; cela diffère du fait de ne pas ajouter d'attribut « alt » du tout.
N’utilisez le mot-clé que s’il décrit réellement l’image et de manière naturelle.
Veillez à ce que la légende soit courte et claire ; évitez les phrases trop longues, quelques mots suffisent généralement.
Pour les images de produits, indiquez le nom du produit et ses caractéristiques importantes (couleur, modèle, angle, etc.).
Si vous effectuez un téléchargement groupé dans votre système de gestion de contenu, créez la balise « alt » manuellement autant que possible, ou au moins à l’aide d’un modèle pertinent basé sur le nom du produit, plutôt que de la remplir automatiquement.
Pour les visuels complexes, tels que les infographies ou les tableaux, envisagez de présenter les détails qui ne tiennent pas dans la légende sous forme de texte brut, juste en dessous de l’image.

Exemple

<img src="baskets-rouges-homme.jpg" alt="Baskets rouges pour homme, vue de côté">

Mauvais exemple : <img src="IMG_2031.jpg" alt="image"> — ni le nom du fichier ni la légende ne fournissent d’informations sur le contenu de l’image. Autre mauvais exemple : alt="chaussures chaussures chaussures de sport chaussures pas chères chaussures en promotion acheter" — celui-ci vise à bourrer le texte de mots-clés plutôt qu’à décrire une seule image, ce qui crée une expérience dénuée de sens et ennuyeuse pour l’utilisateur d’un lecteur d’écran.

Erreurs courantes

Laisser l'attribut « alt » complètement vide (pour les images non décoratives).
Utiliser un nom de fichier dénué de sens, tel que « image1.jpg » ou « IMG_2023 », comme texte d'alternative.
Remplir la balise « alt » d’une succession de mots-clés (par ex. « chaussures, chaussures de sport, chaussures pas chères, chaussures en promotion »).
Répéter la même description générale pour toutes les images.
Le rapport de Seoraporu.co répertorie un par un tous les textes « alt » manquants ; sur les grands sites, il s'agit généralement d'un problème qui doit être corrigé en bloc dans le modèle de gestion des produits/images.