Qu'est-ce que le alt text et comment l'utiliser ? (+ exemples)

Le alt text, également appelé texte alternatif ou attribut alt image, décrit avec du texte une image HTML insérée sur une page web. La description n'apparaît pas nécessairement à l'écran, pourtant le rôle du alt text est fondamental : le moteur de recherche « lit » plus facilement un texte qu'il ne comprend une image.

Qu'est-ce que l'attribut alt text ?

Le alt text, en langage HTML, est un attribut ajouté à la balise image < img src > dans le code de la page web. L'attribut, de manière générale, fournit une information supplémentaire traitée par le navigateur au moment d'afficher la page web. L'attribut alt text indique au navigateur la description de l'image, à afficher si l'image n'apparaît pas au chargement de la page ou à lire par le lecteur d'écran. Lorsque le site est développé à l'aide d'un CMS, nul besoin de savoir coder en HTML : un module d'édition d'image permet d'ajouter le texte alternatif dans un champ alt text dédié.

À noter que l'attribut alt text est distinct de l'attribut title : l'attribut title de la balise image, facultatif, renseigne un titre qui s'affiche lorsque le visiteur du site web pointe sa souris sur l'image.

Au moment de créer un site internet, à l'aide d'un CMS ou en codant en HTML, ajouter du texte alternatif aux images est optionnel. La pratique cependant est recommandée : l'existence du texte alternatif améliore non seulement l'expérience utilisateur mais aussi le référencement naturel.

Pourquoi renseigner le alt text ?

Pour la majorité des internautes, la plupart du temps, le texte alternatif n'est pas visible à l'écran. Pourtant, force est de constater que les sites les mieux performants enrichissent leurs contenus images de cet attribut. Renseigner le alt text présente en effet plusieurs intérêts, en termes de SEO et d'UX.

• Le texte alternatif s'affiche à la place de l'image qui ne se charge pas. Lorsque la connexion est mauvaise, ou lorsque l'internaute a volontairement désactivé l'affichage des images dans son navigateur, le visuel n'apparaît pas à l'écran. Si l'attribut alt text est renseigné, le texte alternatif s'affiche. Afficher une description de l'image, dans ce contexte, diminue la frustration de l'internaute et satisfait sa curiosité. Lorsque l'image est un bouton ou un lien, en outre, le texte alternatif informe le visiteur du site de l'action provoquée s'il clique dessus.
• Le lecteur d'écran, le cas échéant, lit à voix haute le texte alternatif. Renseigner le alt text améliore ainsi l'accessibilité du contenu et permet à l'internaute malvoyant de naviguer sur le web dans les meilleures conditions, avec un niveau d'information élevé.
• Les robots des moteurs de recherche indexent plus favorablement les images décrites avec un alt text. Dès lors, renseigner du texte alternatif pertinent sur les images du site renforce son référencement naturel.
• Les mots-clés du texte alternatif contribuent à augmenter le trafic entrant depuis Google Images. Lorsque l'internaute entre une requête dans le moteur de recherche, Google propose d'afficher les résultats dans sa page Google Images : les images qui incluent un alt text y sont référencées, et l'internaute qui clique dessus est redirigé vers le site web. Si la requête en outre informe Google que l'internaute cherche un contenu visuel, le moteur de recherche fait apparaître en haut de la page des résultats un encart Images. Depuis cet encart, l'internaute accède directement aux visuels dont la description alt text correspond à l'expression-clé de la requête. Exemple : l'internaute tape « rainbow cake bleu et or » ; Google comprend que l'internaute recherche de l'inspiration pour réaliser une recette et affiche un encart Images en haut de la page de résultats ; les images y sont référencées à condition d'avoir un attribut alt text de type « rainbow cake bleu et or » ; le site de recettes de cuisine s'offre l'opportunité de capter du trafic qualifié.

Comment écrire un alt text ?

De bonnes pratiques permettent d'optimiser le texte alternatif, pour améliorer l'expérience utilisateur et le référencement. Au moment d'écrire le alt text, il faut penser à l'internaute d'une part, au moteur de recherche d'autre part.

• Écrire un texte descriptif et concis. À cet effet, il est judicieux de projeter la lecture qu'en fera le lecteur d'écran.

Exemple : l'image d'un chaton blanc en train de bailler dans l'herbe au soleil peut être enrichie du texte alternatif « chaton blanc qui baille dans l'herbe au soleil ». Lorsque l'image n'est pas visualisée, l'internaute se représente correctement le visuel grâce au alt text.

• Ne pas écrire « photo de » ou « image de ». Le lecteur d'écran, généralement, commence la lecture de l'image par ces termes. S'ils sont rajoutés au début du texte alternatif, la phrase est redondante.
• Utiliser les mots-clés pertinents, sans en abuser. Le choix des termes est dicté par les règles de SEO. Pour écrire un alt text efficace, il est important de déterminer sur quelle expression-clé la page doit se positionner.

Exemple : une photo représente Lionel Messi en compagnie de son épouse sur la plage de Copacabana ; si le site web veut attirer des fans du footballeur, le texte alternatif doit mettre en valeur le mot-clé « Lionel Messi » ; si le site promeut la plage brésilienne, le texte alternatif met en valeur l'expression-clé « plage Copacabana » ; les textes alternatifs « lionel messi et son épouse en vacances au brésil » et « la plage de copacabana accueille une star du football » positionnent la page sur des requêtes distinctes.

• Si la page contient plusieurs images, choisir un texte alternatif unique pour chacune d'entre elles et utiliser le mot-clé principal avec modération.
• Limiter le texte alternatif à 125 caractères, les lecteurs d'écran lisent rarement au-delà.
• Ne pas oublier de renseigner un alt text sur les images cliquables de type bouton de formulaire, pour décrire leur fonction. Le texte alternatif est particulièrement utile lorsque l'image n'est pas visualisée : il informe sur le comportement du bouton. Exemple : le bouton d'ajout au panier sur une page produit est enrichi du alt text « Ajouter le produit au panier ».
• Laisser l'attribut alt text vide lorsque l'image est purement décorative, ou lorsque le paragraphe qui suit la décrit.

Pour coder le texte alternatif, il faut renseigner l'attribut alt dans la balise < img src >, de cette manière : < img src="URL source de l'image" alt="texte alternatif" >.

Exemples de alt text sur la photo d'une veste de sport de la marque Nike :

• Le texte alternatif n'est pas suffisamment descriptif : < img src="veste-nike-6173.png" alt="veste de sport" >.
• Le bourrage de mots-clés risque de pénaliser le référencement de la page : < img src="veste-nike-6173.png" alt="veste sport nike vêtement sweat running fitness pas cher homme femme" >.
• Ce texte alternatif recommandé est optimisé : < img src="veste-nike-6173.png" alt="veste de running gris clair à capuche et fermeture zippée, Nike, modèle cintré pour femme" >.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.