Pas envie de lire ? Lancez l'audio pour écouter l'article !
Voiced by Amazon Polly

L’Alt text , l’Alt tag ou text attribute ou encore  texte alternatif désigne une description des images pour les moteurs de recherche et pour certaines catégories de personnes. En effet, certains internautes non-voyants ont des problèmes pour visualiser les images ou pour les comprendre tout simplement. L’insertion du bon texte alternatif permet de décrire à ces derniers le contexte des images afin de leur faciliter la compréhension.

alt text2

Avoir une seule image dans votre contenu suscite l’engagement de vos lecteurs : 

Les articles avec des images sont plus partages

En dehors de l’esthétique, cet engouement est probablement dû au fait que les visuels sont traités 60 000 fois plus vite par le cerveau humain que les textes.

Alexandre Marotel | Twaino | Agence SEO

Alexandre MAROTEL

CEO à Twaino | Agence SEO

Voilà ce que j'offre à mes nouveaux membres

1. Liste : 144+ blogs pour publier des articles invités
2. Un Calculateur de compétition SEO
3. Vidéo exclusive : Comment passer de 0 à 1000 visiteurs ?
4. Outil : Audit SEO immédiat

Alors, il va sans dire qu’illustrer vos articles avec des visuels va délibérément pousser les internautes à les lire. Mais malheureusement, tous les internautes n’ont pas le privilège d’apprécier ces contenus multimédias.

En effet, un sondage en France montre que 72% des personnes interrogées utilisent un lecteur d’écran pour compenser la cécité.

Pour ce faire, il est nécessaire de toujours rajouter à vos images des attributs text pour faciliter à tout le monde l’accès à l’information.

  • Qu’est-ce que le texte alternatif et comment l’utiliser ?
  • Dans quels cas faut-il éviter d’utiliser des textes alternatifs ?
  • Comment créér un texte alternatif sur WordPress ?

Chapitre 1 : Qu’est-ce que le texte alternatif et comment l’utiliser ?

Joindre une image à un article est le meilleur moyen de mieux communiquer avec ses lecteurs. Parmi ces lecteurs de textes, il est évident qu’on y rencontre des personnes qui ne seront pas satisfaites. 

En effet, seules les personnes qui peuvent voir clairement avec leurs yeux, sont les plus susceptibles de jouir pleinement des informations que contient une image. 

Les millions de personnes ayant des problèmes de vue ne sauront justement pas qualifier l’image puisqu’elles n’ont rien vu, d’où l’entrée en jeu du texte alternatif.

1.1. Que signifie un texte alternatif

Encore appelé alt tag ou alt text ou également attribut text, le texte alternatif est employé dans le HTML pour décrire le contexte et la fonction d’une image sur une page

La pertinence du texte a proximite du lien

Par exemple, si vous utilisez une image pour indiquer un bouton sur lequel vous devez cliquer pour pouvoir acheter un produit P, le texte alternatif indiquera : Bouton permettant d’acheter le produit P.

Ainsi, les textes alternatifs aident les personnes qui pour une raison quelconque n’arrivent pas à voir l’image : 

  • Les utilisateurs ayant des problèmes de vues ;
  • Les utilisateurs qui ne chargent pas bien l’image à cause de la connexion ;
  • Les moteurs de recherche.

Ceux de la première catégorie sont les plus concernés puisqu’ils utilisent des lecteurs d’écran ou outil qui transforme les informations visuels en une piste audio ou braille

 

outil-de-transformation-des-visuels-en-piste-audio-braille

Ces derniers se chargent de lire la description de l’image à partir des attributs alt préalablement inscrits. 

Par ailleurs, il est également utile lorsqu’un fichier image ne se charge pas, l’alt text s’affiche à la place de l’image.

Alt text

Les attributs alt offrent une meilleure description au moteur de recherche, aidant ces moteurs à mieux indexer les images.

Exemple illustratif d’un attribut alt : <img src=¨image.png¨ alt=¨image¨>

1.2. Quel format utilisé pour écrire un texte alternatif

Le meilleur format d’écriture d’un texte alternatif ne doit contenir aucun spam ni de bourrage de mots-clé. Il faut que vous arriviez à écrire un texte concis et qui dit l’essentiel, pas besoin d’être trop long, juste quelques mots qui décrivent avec précision l’action sur l’image. 

Pour voir si votre texte est assez décrit, vous pouvez fermer les yeux et demandez à quelqu’un d’autre de vous lire le texte alternatif puis imaginez ce que le texte dit en image.

Voici une illustration de texte alternatif sur une image montrant des nouilles chinoises au poulet et au légume.

Nouille

source : auxdelicesdupalais 

Texte non descriptif:

 <img src=¨nouille.png¨ alt=¨nouille¨>

Ce texte n’est pas exact et ne décrit pas parfaitement la photo. Il est vrai que c’est l’image d’une nouille, mais il y a beaucoup plus à dire sur cette photo.

Texte non descriptif :

 <img src=¨nouille.png¨ alt=¨¨> 

ou 

<img src=¨nouille.png¨ alt=¨nouille nouilles pate alimentaire ble meilleur dejeune meilleur dine meilleurs nourriturre recette de nouille¨>

Aucun de ces textes alternatifs n’est conseillé. La première ligne ne contient aucun texte alternatif et la deuxième est visiblement du keyword stuffing. 

Texte descriptif recommandé :

<img src=¨nouille.png¨ alt=¨nouilles chinoises au poulet et au legume¨>

Ce texte descriptif est le meilleur texte alternatif pour cette image, car il décrit avec exactitude ce que reflète l’image. Il ne s’agit d’une simple nouille comme l’a décrit la première illustration, c’est une nouille chinoise au poulet et au légume.

1.3. Comment s’écrit un bon texte alternatif ?

Une chose est de connaître le format d’écriture d’un texte alternatif, l’autre chose est de savoir bien l’écrire. Pour écrire un bon texte alternatif, il faut :

1.3.1. Décrivez l’image 

En premier lieu, l’Alt text donne une description claire des images aux utilisateurs qui ne peuvent pas les visualiser pour une raison ou pour une autre. 

Pour ce fait vous devez comprendre le contexte de l’image ainsi que le message qu’elle véhicule, afin de mieux la décrire. 

Exemples de texte alternatif :

  • « Groupe musical jouant dans un bar »
  • « Deux chiots courant dans un parc »
  • « Un bébé couché dans un kangourou »

Si les images que vous mettez dans votre contenu ne veulent rien dire ou si elles y figurent pour des raisons de conception, cela ne devrait pas être le cas. Vous devriez mettre ces images dans votre CSS et non dans votre HTML

S’il s’avère impossible de changer d’image, nous vous conseillons de leur donner une attribut alt vide comme :

 <img src=¨image.png¨ alt=¨¨>

La balise alt vide vous assure que l’utilisateur ignore la présence d’une l’image (on y reviendra dans le prochain chapitre).

1.3.2. Gardez le texte alternatif concis 

Les outils ou navigateur de lecture d’écran considèrent 125 caractères généralement pour un texte alternatif. Alors, il est recommandé de ne pas dépasser ce chiffre ou de rester en dessous afin que votre texte soit considéré et puis compris.

Il peut arriver que nous nous disions que les utilisateurs de lecteur d’écran doivent connaître tous les détails sur l’image par exemple : l’âge, l’environnement, le type de vêtements porté, sur quel meuble est assis telle personne, les types de végétation qui sont aux alentours. 

Il est vrai qu’un seul coup d’œil suffit pour capter toutes les informations importantes qui figurent sur une image pour une personne ayant une bonne vue : 

Le cerveau humain traite plus les informations visuelles

C’est la même sensation que nous essayons de reproduire avec les textes alternatifs. Mais soyez concis sur les textes alternatifs tout en fournissant des informations importantes.

1.3.3. Utilisez vos mots-clé 

L’alt attribute vous donne l’occasion d’insérer vos mots clés principaux. C’est alors une autre occasion pour vous d’indiquer au moteur de recherche que la page que vous avez créé est de qualité et est capable de satisfaire une requête de recherche précise.

Les mots cles en SEO

Votre but ne doit pas changer concernant les textes alternatifs, il reste l’intention d’expliquer concrètement le contexte d’une image. Ainsi, après que le contexte de l’image ait été assez compris, vous pouvez juste rajouter à celui-ci un mot clé de votre choix.

Le moteur de recherche ne tient pas rigueur au texte alternatif mal écrit. Mais si vous utilisez votre texte alternatif comme une opportunité de le gaver de tous les mots clés utiles que vous pensez, vous pouvez avoir des pénalités. 

Les pénalités Google

Sinon concentrez-vous sur la manière d’écrire un excellent texte descriptif d’image et si possible d’insérer votre mot clé phare et puis c’est tout. Ne faites rien d’autre pouvant avoir des conséquences sur votre site ou page.

1.3.4. N’utilisez pas une image comme texte 

Il ne s’agit pas forcément d’une meilleure technique pour écrire un texte alternatif. 

Les moteurs de recherche n’arrivent pas à appréhender avec excellence les textes des images, il faut donc éviter de remplacer vos textes par des images. Notamment si vous souhaitez que les moteurs de recherche tiennent compte de ces textes. 

Pour vous aider, en voulant le faire, décrivez ce que dit l’image dans le texte alternatif.

1.3.5. Évitez de mettre « images de telle chose » dans le texte alternatif

Il n’est pas conseillé de commencer un texte alternatif par « photo de« , « image de » ou autre tournure similaire.

Sachez que le lecteur d’écran commence la lecture d’un texte alternatif par là. Alors, pour ne pas que le lecteur d’écran fasse des répétitions comme « image de image de » ce qui est moins agréable à écouter, évitez simplement de commencer vos texte par là.

Il faut déjà considérer que votre texte alternatif veut décrire le contexte d’une image. Alors, il n’est plus nécessaire de le préciser. 

1.3.6. Évitez de rédiger les formulaires à boutons

Lorsque le bouton <<soumettre>> d’un formulaire de votre site internet est une image, insérez-le dans un attribut alt. 

Utiliser les boutons de partage

L’attribut alt du bouton va spécifier au lecteur la fonction du bouton : « partager sur » ou « rechercher »… Ce qui facilitera la lecture.

1.3.7. Évitez d’utiliser le titre de l’image

Nous découvrons plusieurs types d’interface de gestion des images qui présentent des titres d’image en plus des textes alternatifs. Nous vous conseillons de ne pas écrire des titres aux images, car personne ne les utilise.

D’abord, ces titres ne marchent pas sur les écrans tactiles et les ordinateurs nécessitent que l’on utilise la souris pour laisser le pointeur sur le titre avant de le voir s’afficher, ce que personne ne fait. 

Les titres dappats ou clickbait

En plus de cela, quand vous ajoutez un titre de texte, cela mène certains lecteurs d’écran sur deux pistes en lisant le texte alternatif ainsi que le titre d’images. Ce qui fait une répétition. 

Voilà pourquoi il est judicieux de ne pas mettre de titre aux images et rédigez uniquement le texte alternatif.

1.4. Les machines peuvent-elles écrire un texte alternatif ?

Bien que l’intelligence artificielle et les systèmes de détection automatique permettent de décrire avec précision un élément, il leur est encore impossible de comprendre le contexte d’une image

Même si les ordinateurs sont très doués, il n’ont pas encore les aptitudes nécessaires pour rendre concis un texte imagé. Soit il fournit une description très détaillé de l’image ou soit c’est le contraire, la description est très peu. 

Machine Learning 

Facebook par contre a une fonctionnalité qui permet de fournir une description automatique des images, mais une fois encore c’est une description très bref qui ne tient pas vraiment compte du contexte.

Exemple de description de facebook : <<cheval à l’intérieur>>. En réalité, la photo montrait un cheval qui galope dans un ranch. Pas très vrai comme texte alternatif, n’est-ce pas ? 

C’est pour ces raisons que vous devez écrire vos textes alternatifs par vous-même, comme ça vous pouvez vous assurez de sa qualité.

Il est important d’utiliser les textes alternatifs, car il améliore la compréhension de l’ensemble des internautes. Mais parfois, il est préférable de l’éviter. 

Chapitre 2 : Dans quels cas faut-il éviter d’utiliser les textes alternatifs ?

En général, il est important, voire obligatoire de mettre un texte alternatif pour les images. Mais il faut dire qu’en toute chose, il y a une exception. 

Il existe des cas pour lesquels il est recommandé de laisser le champ du texte alternatif vide.

Il est à mentionner que l’attribut alt ne doit pas être supprimée, car cela risquerait d’abîmer la norme HTML. Mais vous pouvez simplement garder le champ vide. 

Exemple :

Alt= » »

Voici les cas dans lesquels vous devez laisser le texte alternatif vide.

2.1. Répétition d’images dans les flux

Supposons que vous êtes en train de faire défiler votre flux twitter. Mais à chaque instant que vous désirez visualiser un tweet récent, vous êtes obligé d’entendre d’abord le lecteur d’écran dire, « photo de profil de l’utilisateur », « nom d’utilisateur de celui qui a fait le poste ». 

Nous sommes tous d’accord que ça serait très insupportable pour n’importe qui : 

Statistiques tweeter

D’autres sortes de flux :

  • Les liens vers des articles ;
  • Les flux de messagerie ;
  • Les flux de commentaires.

Alors, dans le but de faciliter l’accès aux utilisateurs, l’idéal est de laisser le texte alternatif vide en ce qui concerne les images qui reviennent à plusieurs reprises dans les flux.

2.2. Les textes ajoutés aux icônes

Vos icônes doivent être toujours suivies de texte. Seule l’utilisation des textes alternatifs nécessite des conditions. Quand on prend l’exemple les boutons de réseaux sociaux :

Pourquoi et Comment integrer les boutons des Reseaux Sociaux blog

Si vous ajoutez un texte alternatif à une icône Instagram, un lecteur d’écran aura à faire une lecture du genre : « Instagram Instagram » ça sonne mal bien évidemment. 

Il est vrai que de manière évidente, ce texte n’est pas alternatif. Vous devez être sûr que l’icône et le texte du lien, soient réunis dans un même alt lien, pour une utilisation beaucoup plus souple. 

Ainsi, vous devez laisser le champ texte alternatif vide comme ceci :

HTML

<a href= »… »>

<img src= »icone-instagram.png » alt= » » />

Instagram

</a>

En parlant des icônes, nous avons aussi les boutons Menu : 

Icon library

Source : Icon-library 

Avant toute chose, il faut distinguer une icône simple d’une icône avec une étiquette

En considérant l’image ci-dessus, l’icône simple est le premier qui n’a pas la mention « Menu », l’autre représente bien évidemment les icônes Menus ainsi que leurs étiquettes.

Lorsque le bouton d’un menu n’est pas constitué d’étiquette, ce qui au passage est désagréable aux lecteurs, il faut à ce menu un texte alternatif

Vous devez cependant, décrire la fonction de l’icône en écrivant « Menu » tout simplement. Ne mettez pas « trois barres horizontales » ou « Point carrefour » ou autre description de ce genre.

Par contre, si l’étiquette figure sur l’icône de Menu, vous pouvez laisser le texte alternatif vide. Les lecteurs d’écran lisent souvent les boutons de Menu comme ça : « menu du menu ». C’est probablement le fruit de l’agencement d’une icône à étiquette et d’un texte alternatif.

2.3. Images et lien

De manière habituelle, les images et les liens se complètent. Dans ces conditions, le lien et l’image se retrouvent dans les mêmes attributs alt dans HTML. Puisque le lien contient un texte, il faut alors laisser le texte alternatif vide. Ce qui est essentiel aux lecteurs, c’est de pouvoir entendre le texte du lien. 

La pertinence du texte a proximite du lien

En effet, le texte alternatif dans une image avec un lien ne fera que rajouter des phrases de plus. Le texte alternatif risquerait de reprendre les mêmes descriptions que celui du lien. 

Alors, vous pouvez simplement donner une explication convenable dans le texte alt du lien. Pour que les utilisateurs ne se retrouvent pas avec deux informations.

2.4. Les images décoratives

Comme nous l’avons dit dans le chapitre précédent, les images qui n’ont pas une valeur à apporter au lecteur sont enlevées de HTML et déplacées en CSS ou en arrière-plan

En ce qui concerne les images décoratives, ce sont des images qui n’apportent aucune information aux utilisateurs et doivent être déplacées en CSS. L’exemple de l’image en arrière-plan de Netflix :

Netflix

Pour ces genres d’images, vous n’avez pas besoin d’un texte alternatif.

2.5. Texte alternatif et logo

Généralement les logos qui sont au niveau de l’entête ont un rapport avec la page d’accueil du site internet. 

Pour certaines personnes, le texte alternatif des logos doit préciser la dénomination de l’entreprise ainsi que la nature de l’image (qu’il s’agit d’un logo). 

Exemple : <<Netflix,logo,allez à la plage d’accueil>> .

Pour nous, ce texte est trop rempli, parce qu’un lecteur d’écran mentionne déjà que c’est une image (logo) et que c’est un lien dirigeant vers une page d’accueil. 

Alors, il faut juste mentionner le nom de l’entreprise. Pour le reste, l’utilisateur devrait deviner qu’il s’agit d’un logo et d’un lien.

Comment choisir son logo d'entreprise ?

Nous savons dans quel cas il faut éviter de mettre des textes alternatifs. Cependant savez-vous que c’est plus facile d’ajouter un texte alternatif à WordPress

Chapitre 3 : Comment appliquer un texte alternatif sur WordPress ?

Avant de continuer sur le sujet nous allons aborder un point essentiel. Savez-vous que les textes alternatifs peuvent donner un coup de pousse au référencement de votre page ?

3.1. Texte alternatif d’image et référencement

L’utilisation de texte alternatif sur vos images a la capacité de mieux répondre aux attentes des utilisateurs, mais aussi peut optimiser vos chances de référencement.  

Bien que la technologie qui permet de reconnaître les images de Google se soit perfectionnée avec le temps, les robots d’exploitation ont toujours du mal à visualiser les images comme nous

Alors, il n’est pas conseillé de confier l’intégralité de l’interprétation de vos images à ces robots, car s’ils se trompent vous risquez de manquer le classement.

Galerie SEO Twaino blog

Alors, tout se résume sur le jeu que vous jouez avec la pertinence de votre Alt text et du mot clé cible utilisé. 

En effet, l’utilisation des mots-clés à ce niveau ne fera que renforcer la pertinence de votre contenu sur la thématique en question auprès de Google.

De plus, vous allez être bien positionné dans Google image lorsque les utilisateurs chercheront à avoir des visuels pour diverses raisons. Ce qui vous fait une autre source de trafic : 

Resultat recherche image funnel de vente WordPress

3.2. Comment ajouter des textes alternatifs à WordPress ?

WordPress est un CMS qui facilite l’insertion des attributs alt

Pour faire cela correctement, veuillez suivre ces étapes pour l’ajouter à vos images. Ceci peut avantager votre SEO ainsi que les utilisateurs qui n’arrivent pas à voir les images.

hebergeur CMS

  • Connectez-vous au site WordPress : Une fois connecter, allez dans votre <<tableau de bord>>
  • Ouvrez votre médiathèque ;

Mediatheque WordPress

  • Cliquez sur les image pour avoir accès aux options :

Options modification image WordPress

Résumé

Les textes alternatifs sont très importants. Ils permettent d’apporter des informations supplémentaires aux internautes, notamment ceux qui ont des problèmes de vue et n’arrivent pas à visualiser des images.

En effet, ces textes ont pour véritable but de décrire la présentation d’une image ainsi que son contexte. Ils doivent être écrits d’une certaine manière en tenant compte des mots clés, des informations précises et concises.

Les textes alternatifs peuvent ne pas être indiqués sur des images dans certains cas comme les répétitions d’images et autres mentionnés ci-dessus.

Aussi, ces textes peuvent participer activement aux référencement d’une page. Google peut en effet se servir du mot clé inséré dans le texte ainsi que la qualité de l’image pour mieux indexer une page ou un site. 

Nous espérons que le terme Alt text / Alt Tag / Text Attribute ne vous posera désormais plus de problème.

A très bientôt!