L’utilisation d’un texte alternatif est considérée comme un principe d’accessibilité pour les utilisateurs de sites web et permet aux personnes malvoyantes ou aveugles d’obtenir une description complète de l’image.

En plus d’être important pour l’accessibilité, le texte alternatif peut également améliorer le référencement des moteurs de recherche pour les images.

Il est important de veiller à ce que le texte alternatif soit descriptif mais concis, sans tenter de remplir des mots clés inutiles.

Qu’est-ce que le texte alternatif ?

Le texte alternatif (Alt text) décrit l’apparence ou la fonction d’une image sur une page. Le texte alternatif est lu à haute voix par les lecteurs d’écran utilisés par les utilisateurs malvoyants, s’affiche à la place d’une image si celle-ci ne se charge pas et est indexé par les robots des moteurs de recherche pour mieux comprendre le contenu de votre page.

Également connu sous le nom d'”attributs alt”, de “descriptions alt” ou, techniquement parlant, de “balises alt”, le texte alt est utilisé dans un code HTML ou dans le champ approprié de votre CMS (Content Management System ou système de gestion de contenu).

Quand le texte alternatif est-il utilisé?

1. L’ajout d’un texte alternatif aux images de votre site est un principe d’accessibilité du Web.

2. Les attributs Alt permettent aux lecteurs d’écran de lire les informations sur les images de la page au profit d’une personne totalement aveugle, malvoyante ou incapable de visualiser les images de la page.

3. Le texte Alt s’affiche à la place de l’image si le fichier image ne peut pas être chargé.

4. Le texte Alt fournit un meilleur contexte/une meilleure description de l’image aux robots d’exploration des moteurs de recherche, ce qui les aide à indexer et à classer correctement une image dans la recherche d’images. Il fournit également aux moteurs de recherche des informations contextuelles sur le contenu de la page.

Comment voir le texte alternatif?

Le texte alternatif peut être vu en inspectant le code source de la page web où l’image est utilisée.

Vous pouvez faire cela en utilisant les outils de développement intégrés de votre navigateur web, tels que “Inspecter l’élément” dans Google Chrome ou “Afficher le code source” dans Firefox.

Une fois que vous avez ouvert les outils de développement, vous pouvez localiser l’image pour laquelle vous voulez voir le texte alternatif et trouver la ligne de code HTML associée à cette image.

Le texte alternatif est généralement défini dans l’attribut “alt” de l’élément “img”.

Le texte en surbrillance à droite indique le texte alt (attribut alt) de l'image à gauche.
Le texte en surbrillance indique le texte alt (attribut alt) de l’image à gauche.

Exemple de texte alternatif

<img src="image_gdr.jpeg" alt="Exemple de fichier Robots.txt">

Quel est le format optimal d’un texte alternatif ?

Le meilleur format pour le texte alternatif est suffisamment descriptif, mais ne contient aucune tentative de bourrage de mots clés. Si vous pouvez fermer les yeux, demander à quelqu’un de vous lire le texte alt et imaginer une version raisonnablement précise de l’image, vous êtes sur la bonne voie.

Examinons quelques exemples de texte alt pour cette image d’une délicieuse pile de crêpes aux myrtilles :

exemple de balise alt - assiette de crêpes aux myrtilles

Exemple correct d’un texte alternatif:

<img src="crêpes.png" alt="crêpes"> 

Ce texte alt n’est que “correct” car il n’est pas très descriptif. Oui, c’est l’image d’une pile de crêpes. Mais, il y a plus à dire sur cette image.

Exemple d’un attribut alt recommandé: 

<img src="crepes.png" alt="Pile de crêpes aux myrtilles et fromage blanc">

Ce texte alternatif est une meilleure solution car il décrit beaucoup mieux le contenu de l’image, tout en restant concis. Il ne s’agit pas seulement d’une pile de “crêpes” (comme le montre le premier exemple de texte alt), mais d’une pile de crêpes aux myrtilles et fromage blanc !

Exemple d’un texte alternatif non recommandé:

<img src="crêpes.png" alt="">

ou

<img src="crêpes.png" alt="crêpe crêpes petit déjeuner meilleure nourriture meilleur petit déjeuner recette de crêpes et fromage crêpes myrtilles et fromage">

Aucun de ces 2 derniers exemples n’est recommandé. La première ligne de code ne contient en fait aucun texte alternatif (remarquez que les guillemets sont vides), tandis que le deuxième exemple illustre le bourrage de mots-clés dans le texte alternatif.

Pourquoi le texte alternatif est-il important ?

1. Accessibilité

Le texte Alt est un principe de la conception de sites Web. Son objectif initial (et toujours principal) est de décrire les images aux visiteurs qui ne sont pas en mesure de les voir.

Cela inclut les lecteurs d’écran et les navigateurs qui bloquent les images, mais aussi les utilisateurs malvoyants ou incapables d’identifier visuellement une image.

L’ajout de texte alt à vos images permet à tous les utilisateurs, quelle que soit leur capacité visuelle, d’apprécier le contenu de votre site.

2. Recherche d'images pour le référencement

L’inclusion du texte alt de l’image améliore l’expérience utilisateur et l’accessibilité, mais elle peut aussi vous faire bénéficier d’avantages explicites et implicites en matière de référencement.

En veillant à ce que vos images soient optimisées pour la recherche, elles sont mieux classées dans les recherches d’images et les packs d’images.

Lorsque vous optimisez la recherche d’images, vous devez en priorité aider les images à apparaître lorsque les utilisateurs saisissent des requêtes textuelles.

Pour ce faire, suivez les meilleures pratiques en matière de référencement des images :

– les formats de fichier modernes

– Texte alternatif

– Noms de fichiers pertinents

– le balisage Schema.

Tout cela aide Google à mieux comprendre les images de votre site et à renvoyer un résultat de recherche d’image pertinent.

Bien que la technologie de reconnaissance d’images des moteurs de recherche se soit considérablement améliorée au fil des ans, les robots d’exploration ne peuvent toujours pas “voir” les images d’une page Web comme nous le pouvons, et il n’est donc pas judicieux de laisser l’interprétation entre leurs seules mains. S’ils ne comprennent pas ou se trompent, il est possible que vous soyez classé pour des mots clés non souhaités ou que vous ne soyez pas classé du tout.

Voici un exemple : Google pourrait voir l’image suivante et être capable de déchiffrer qu’il s’agit d’un homme, ici Monsieur Anderson caché derrière un bureau.

Matrix - Monsieur Anderson caché derrière un bureau
Matrix – Monsieur Anderson caché derrière un bureau

Si vous essayez d’obtenir un classement pour ” Matrix – Monsieur Anderson caché derrière un bureau”, vous devrez donner un coup de main au moteur de recherche.

Quelle est l’importance du texte alternatif ?

Outre la mise en œuvre des meilleures pratiques en matière de titre d’image et de nom de fichier, l’inclusion d’un texte alt garantit que tous les utilisateurs et les robots peuvent comprendre le contenu de votre site Web.

Le texte alt vous offre une autre occasion d’inclure votre mot-clé cible.

L’utilisation des mots clés sur la page étant toujours un facteur de classement dans les moteurs de recherche, vous avez tout intérêt à créer un texte alternatif qui décrit l’image et, si possible, inclut un mot clé ou une expression clé que vous ciblez.

De plus, si le trafic généré par la recherche d’images est un élément clé de votre stratégie de référencement, donner à Google les bonnes informations sur vos images est un bon moyen de communiquer la pertinence du sujet.

Pour ce faire, vous pouvez utiliser correctement les formats de fichier modernes, le texte alt, les noms de fichier pertinents et le balisage de schéma.

Comment écrire un bon texte alternatif ?

1. Décrivez l'image aussi précisément que possible. Le texte Alt est, avant tout, conçu pour fournir des explications textuelles des images aux utilisateurs qui ne peuvent pas les voir. Si une image n’a vraiment aucune signification ou valeur et qu’elle n’est là qu’à des fins de conception, aussi appelée image décorative, elle doit être placée dans le CSS et non dans le HTML.

2. Soyez (relativement) bref. Il est conseillé de limiter le texte alt à environ 125 caractères ou moins. Il était auparavant indiqué que les lecteurs d’écran les plus répandus coupaient le texte alt après environ 125 caractères. Bien qu’il ne s’agisse plus d’une règle absolue, cela reste un bon guide pour les créateurs de contenu et les référenceurs. Pour la rédaction du texte alternatif d’images complexes nécessitant des descriptions plus longues, voir le point 7 ci-dessous, intitulé “Meilleures pratiques pour les images complexes”.

3. Incluez vos mots clés. Le texte alternatif vous donne une autre occasion d’inclure votre mot clé cible sur une page, et donc une autre occasion de signaler aux moteurs de recherche que votre page est très pertinente pour une requête de recherche particulière. Bien que votre priorité doit être de décrire l’image et de lui fournir un contexte, si cela est judicieux, incluez votre mot-clé dans le texte alt d’au moins une image de la page.

3. Évitez le bourrage de mots-clés. Google ne vous retiendra pas pour un texte alternatif mal écrit, mais vous aurez des problèmes si vous utilisez votre texte alternatif comme une opportunité pour y insérer autant de mots-clés pertinents que vous pouvez imaginer. Concentrez-vous sur la rédaction d’un texte alt descriptif qui fournit un contexte à l’image et, si possible, inclut votre mot-clé cible, et restez-en là.

4. N'utilisez pas les images comme du texte. Il s’agit moins d’une bonne pratique spécifique au texte alternatif que d’un principe général de développement Web favorable au référencement. Comme les moteurs de recherche ne peuvent pas lire le texte de vos images, vous devez éviter d’utiliser des images à la place de mots. Si vous devez le faire, expliquez ce que dit votre photo dans votre texte alternatif.

5. N'incluez pas "image de", "photo de", etc. dans votre texte alternatif. On suppose déjà que votre texte alt fait référence à une image, il n’est donc pas nécessaire de le préciser.

6. Utilisez les meilleures pratiques pour les images complexes. Décrivez les cartes, les graphiques, les diagrammes et toute autre image complexe en utilisant les meilleures pratiques en matière d’accessibilité (ouvre un nouvel onglet en anglais). Bien que les navigateurs traitent l’attribut longdesc=”” différemment, les utilisateurs de lecteurs d’écran peuvent les utiliser.

7. Ne négligez pas les boutons de formulaire. Si un formulaire de votre site Web utilise une image comme bouton “Envoyer”, attribuez-lui un attribut alt. Les boutons d’image doivent avoir un attribut alt qui décrit la fonction du bouton, comme “rechercher”, “postuler maintenant”, “s’inscrire”, etc.

À quoi ressemble un bon texte alternatif ?

Voyons quelques exemples de texte alternatif :

Texte alternatif – Exemple 1 :

tête de tigre sumatera rugissant
tête de tigre sumatera rugissant

Exemple correct du texte alternatif de l’image:

<img src="tigre.png" alt="Tigre">

Un bon exemple du texte alternatif de l’image:

<img src="tigre.png" alt="Tigre rugissant">

Le meilleur exemple du texte alternatif de l’image:

<img src="tigre.png" alt=" tête de tigre sumatera rugissant">

Texte alternatif – Exemple 2 :

femme en bikini lisant un livre à la plage
femme en bikini lisant un livre à la plage

Exemple correct du texte alternatif de l’image:

<img src="escalator.jpg" alt="femme à la plage">

Un bon exemple du texte alternatif de l’image

<img src="escalator.jpg" alt="femme en bikini à la plage">

Le meilleur exemple du texte alternatif de l’image

<img src="escalator.jpg" alt=" femme en bikini lisant un livre à la plage ">

Questions fréquemment posées

C’est quoi le texte alternatif sur Instagram ?

Sur Instagram, le texte alternatif est une description de l’image ou de la vidéo que vous publiez. Il peut inclure des hashtags, des mentions d’utilisateurs et du texte supplémentaire qui décrit le contenu de votre publication.

Le texte alternatif est important pour les utilisateurs qui utilisent un lecteur d’écran ou qui ne peuvent pas voir l’image ou la vidéo pour une raison quelconque.

Cela peut également aider à améliorer la découverte de votre publication sur Instagram (sur Google aussi), car les algorithmes peuvent utiliser le texte alternatif pour déterminer le contenu et les thèmes de votre publication.

Conclusion

Le texte alternatif est un élément crucial pour la conception de sites web en raison de ses multiples utilisations pour améliorer l’accessibilité pour les utilisateurs malvoyants et l’indexation des images dans les moteurs de recherche.

Il est important de fournir un texte alternatif descriptif et concis qui respecte les normes pour garantir une expérience optimale pour les utilisateurs et une indexation correcte des images dans les moteurs de recherche.

En fin de compte, le texte alternatif peut améliorer significativement l’expérience de l’utilisateur et l’indexation des images.