Comment et Pourquoi il faut utiliser l’Attribut Alt pour ses images et Photos

Quel que soit le système vous permettant de Bloguer ou de faire tourner et mettre à jour votre site web, il est vous est très probablement déjà arrivé de croiser ce champ nommé Attribut Alt ou Balise Alt dès lors où vous mettez en ligne une image ou photo en ligne. Mais qu’est donc cette fameuse balise Alt ? Et à quoi sert-elle ?

Arrêtons-nous aujourd’hui sur un attribut relatif aux images et photos que nous utilisons tous les jours pour nos espaces web et qui hélas est encore trop souvent laissé de côté, au détriment du blog en question, au détriment du SEO de l’image ainsi qu’au détriment de l’expérience utilisateur et donc de l’internaute.

L’Attribut Alt d’une image, c’est quoi ?

L’Attribut Alt permet tout simplement de décrire de manière naturelle et optimale, le contenu d’une photo.

Il convient de ne pas confondre le Nom/titre d’une image et l’attribut Alt qui sont deux choses bien distinctes.

Le Nom ou Titre de l’image est ce qui apparaît lorsque vous parcourez par exemple vos fichiers photos sur votre PC ou Mac. Par exemple, le nom ou titre d’une photo est ce qui est généré automatiquement par un appareil photo numérique ou photo prise par un Smartphone.

Ci-dessous des exemples d’images au format dont justement on voit le nom (=Titre) :

Exemple de titre - Nom d image au format PNG

Exemple pour des photographies au format PJPG, dont on voit donc aussi le nom des fichiers généré par un appareil photo numérique :

Photos format jpg avec nom de photo

L’attribut Alt (ou alternatif) sera quant à lui une information qui sera saisie une fois qu’une image/photo sera mise en ligne sur un espace web, qu’il s’agisse d’un blog ou d’un site.

Le Contexte doit rester cohérent avec la Balise alt

L’attribut Alt devra par ailleurs rester cohérent avec l’article ou page où la photo ou image apparaîtra. Un attribut Alt doit correspondre au contexte ayant justifié la présence de la photo/image et au contexte du contenu (donc de l’article).

Exemple : Si vous rédigez un long article sur votre travail de tricot d’un joli pull, en toute logique, la ou les photos intégrées à votre article devront correspondre à cet univers très ciblé. Qu’il s’agisse d’une vue macro d’une maille du tricot concerné, ou encore des aiguilles :) Pourrait être tolérée une photo d’un animal dont émane la laine utilisée, mais il faudra alors indiquer justement dans l’attribut ALT que la laine utilisée pour le pull dont fait l’objet votre article, provient d’un lapin ou encore d’un mouton (non le sujet n’est pas glamour, mais il permet de comprendre que ce qui semble incohérent d’emblée, ne l’est pas forcément quand on s’intéresse au contexte).

Vous l’aurez compris, la photo doit coller au contexte et contenu de votre article, tout comme par extension, votre attribut Alt devra correspondre à ce contexte. Sans quoi, un moteur de recherche aura du mal à interpréter pourquoi cette photo avec cet attribut ALT est présent sur tel article. Les infos seront considérées comme confuses.

Utilisation de la Légende en supplément de la balise alternative

Pour revenir à notre exemple, vous pourrez ainsi profiter d’autres informations et champs afin de préciser la raison de l’utilisation de cette photo. Ainsi, quand vous insérerez la photo de l’animal dont provient la laine utilisée pour le pull sur lequel vous ferez votre article, vous pourrez ajouter une légende sous votre photo. Exemple de légende :

Lapin Angora (exemple d'attribut Alt)
Lapin Angora dont est tirée la laine utilisée pour le tricot de mon Pull sur lequel porte mon article

La Légende est le texte qu’on voit couramment sous une photographique ou image, que ce soit sur un blog ou un site web. La légende permet de compléter une description de photo, d’expliquer en partie la présence d’une photo ou encore parfois, de nommer l’auteur d’une photo comme sa source (avec ou sans lien).

Pourquoi il convient d’utiliser absolument l’attribut ALT ?

Le meilleur moyen pour se motiver à utiliser le fameux attribut Alt, souvent nommé également « Balise Alt », c’est de savoir à quoi il sert. En l’occurrence, on va très vite se rendre compte de combien cette information est aussi légitime qu’importante.

En bref, l’attribut Alt permet :
– D’afficher une description d’une photo si cette dernière ne s’affiche pas sur une page.
– De contribuer à l’optimisation du référencement d’une photo ou image.
– D’aider les malvoyants ou non voyants à connaître et comprendre une photo.
– D’avoir une description déjà présente pour Pinterest quand une photo/image sera épinglée.

Ci-dessous, ces 4 bonnes raisons d’utiliser l’attribut alternatif, développées avec exemples et détails :

L’Attribut Alt s’il est renseigné, permet :
D’afficher une description d’une photo ou image si celle-ci ne s’affiche pas.
Exemple concret : Vous êtes en vacances dans le fin fond de la campagne frenchie, vous avez à peine de barrettes de 3G. Bref, vous connecter à internet depuis votre téléphone, c’est déjà un sacré challenge, mais alors pour ce qui est d’afficher des images, bah c’est encore plus compliqué. Au point que parfois justement, une photo ne s’affichera pas.
Et bien c’est notamment dans ce cas-là que l’attribut ALT aura toute son importance. Car si une image ne s’affiche pas à cause de votre connexion (idem pour vos lecteurs/abonnés), alors le texte contenu par l’attribut Alt lui, il s’affichera à la place de la photo en question.
Donc, si l’attribut Alt est vide ou si il ne contient que IMG_980, autant dire que ça ne va pas vous parler, ni à vous ni à à personne.
-> C’est valable pour les problèmes de connexion empêchant une image de s’afficher. Un problème de navigateur internet (Internet Explorer, Safari, Chrome…)
-> C’est aussi valable si votre PC, MAc ou Smartphone a un bug temporaire ou encore s’il est ralenti.

La preuve en image grâce à l’exemple fourni ici dans l’Aide de Google :

Exemple de description de photo via attribut alt

Via cette capture, on a le cas parfait de l’image qui ne s’affiche pas. Mais plutôt que d’avoir un vide sans info aucune ou d’avoir un nom de fichier courant (hélas) comme IMG_4343, on a un vrai descriptif de la photo. Parlant non ?

L’Attribut Alt s’il est renseigné, permet aussi :
Aux personnes malvoyantes de connaître et comprendre le contenu de l’image.
Cela peut paraître tout bête, pourtant voilà une très bonne raison de renseigner la fameuse balise alt. En effet, pour des utilisateurs malvoyants, des options de navigateur ou logiciels spécifiques, permettent d’avoir une assistance vocale. Et si l’attribut ALT est renseigné, alors l’assistant vocal sera en mesure de lire et d’interpréter la description de l’image/photo donnée par l’attribut Alt, pour la restituer de manière fidèle à l’internaute malvoyant. Lui permettant ainsi de savoir ce que contient la photo concernée. Voici une autre très très bonne raison de prendre le temps de renseigner la balise ALT.

Enfin, L’Attribut Alt s’il est renseigné, contribue à un meilleur référencement et joue donc un rôle important d’un point de vue SEO (optimisation pour les moteurs de recherches) :
Une photo ou image disposant d’un attribut ALT correctement renseigné, sera mieux interprétée par Google et consort et en toute logique, aura encore plus de chance d’être soumise à un internaute lors d’une recherche correspondant au contenu de l’image.

Besoin d’un exemple ?
Vous avez récemment peint un magnifique tableau d’art abstrait dont vous avez fait une photo que vous allez mettre en ligne sur votre blog ou sur le portfolio de votre site web. Lorsque la photo du tableau sera mise en ligne, Google ne sera pas forcément en mesure d’interpréter le contenu du tableau puisque par définition, le contenu est abstrait.

Exemple image art abstrait avec attribut alt descriptif du tableau
Exemple image art abstrait avec attribut Alt descriptif du tableau + une légende :)

En revanche, si vous renseignez de manière à la fois naturelle et précisez le champ Attribut Alt, vous aiderez alors Google et ses copains à comprendre le contenu de la photo, avec par exemple :
Tableau Art Abstrait Expression de Liberté par Céline Dupont Artiste peintre.
En quelques mots simples traduisant exactement ce dont il s’agit, vous dîtes à Google : « Hey, ok quand on voit la photo du tableau, on ne sait pas spontanément ce que c’est, alors je vais t’aider et te dire ce que c’est ! ».

Bien évidemment, c’est valable pour des photos et images dont le contenu sera plus concret, comme pour la photo d’un chat noir endormi sur une cheminée et pour laquelle, au lieu de se contenter de mettre en Attribut Alt « Chat qui dort », on indiquera plutôt : « Chat noir endormi sur la cheminée« . Afin d’être clair, net et précis quant au contenu.

Il vous faut une dernière très bonne raison d’utiliser l’attribut Alt/Texte alternatif ?

– Sachez que la plupart du temps, lorsqu’une Image ou Photo est épinglée à destination de Pinterest, c’est l’attribut ALT qui apparaîtra en tant que description de l’épingle :) Alors autant profiter de ce petit champ qui semble anodin, pour faciliter la vie à vos lecteurs/visiteurs/abonné(e)s ainsi qu’aux internautes en général, en leur offrant des images optimisées pour le SEO, mais aussi dans la foulée sans vous rajouter de boulot, pour Pinterest ! (moi je dis ça, je ne dis rien, d’ailleurs vous retrouverez cette info chez Cécile de Blog By Yourself)

Comment et Pourquoi il faut utiliser l'Attribut Alt pour ses images et Photos

Comment bien renseigner l’attribut Alt ?

Si pour le nom d’une photo il est préconisé de ne pas utiliser d’accents, de caractères spéciaux ou encore d’éviter le tiret du 8 à savoir l’underscore, pour ce qui est du champ Attribut Alt (ou alternatif), on pourra rédiger la description de manière naturelle.

Pour un titre d’une photo de chat endormi, on utilisera alors :

chat-noir-endormi.jpg

Pour l’attribut alt de la même photo, on indiquera :

« Mon chat noir endormi sur la cheminée »

L’idée est de présenter le contenu de l’image, de façon courte et précise. Le plus naturellement du monde. Pour notre exemple, on se contente de ce que l’on sait : Que la photo a pour sujet un chat noir, dont l’action est de dormir, ce sur une cheminée. C’est tout et ça suffit à cibler en quelques mots ce dont il s’agit. Pas besoin d’en rajouter.

Justement, il faudra éviter d’en rajouter, au risque qu’un attribut alt trop riche et rempli de mot clé ne soit considéré comme du spam. Alors même si votre blog évoque le bien être et le confort de nos amis les félins et que le chat en question est un chat de race, on évitera un attribut alt comme le suivant :

‘Chat matou félin poils pelage uni couleur noir race Bombay jouets pour chats paniers chat faits maison pas cher’

Vous allez sans doute penser que c’est dommage de ne pas être très précis(e) quand justement on nous propose un champ pour décrire au mieux une photo. Ce n’est pas complètement faux. Il convient en revanche de bien distinguer une description d’un enchaînement de mots clés. D’ailleurs, dans sa rubrique d’aide, Google indique ceci :

Recommandation Google sur l usage des accumulations de mots cles

Il suffit donc de rester le plus basique possible lors de la rédaction de l’attribut Alt en donnant les informations élémentaires du contenu d’une photo. Pour un couché de soleil pris en Normandie, on se contentera par exemple de : »Coucher de Soleil sur la plage de Deauville en Normandie ». En quatre mots (hors articles comme le/la etc…), vous indiquez purement et simplement que la photo a pour sujet une scène naturelle, ayant lieu sur une plage d’une célèbre ville de Normandie qu’on ne présente plus ;)

On peut utiliser des majuscules quand cela s’y prête et toute la ponctuation qu’on estime nécessaire. Si le sujet de la phot ou de l’image pose une question, on peut même indiquer quelle est cette question dans la balise ALT. Idem s’agissant de même un tiret à un mot composé… La balise alt doit être rédigée naturellement, sans spam de mots clés. Et devrait idéalement présenter le contenu de l’image ou photo.

Où Renseigner l’attribut Alt après mise en ligne d’une photo ?

Selon la plateforme de blog ou site web que vous utilisez ou selon le CMS qui permet à votre blog de tourner, le champ à renseigner ne sera pas le même et portera par ailleurs un nom qui pourra varier, même si généralement, le nom de ce champ sera Texte alternatif.

Sur WordPress.org et WordPress.com, l’attribut Alt est nommé Texte alternatif :

Attribut Alt texte alternatif sur WordPress

On voit bien sur cette capture, la nuance entre nom/titre du fichier image (ici une photo) et le texte alternatif (= donc notre attribut Alt) qu’il convient de renseigner. Entre les deux champs, nous voyons également le champ Légende qui pourra également être renseigné si nécessaire.

Sur Blogger, le champ dédié à la saisie de l’attribut ALT se nomme aussi Texte alternatif :

Texte alternatif sur Blogger

Chez Overblog, le champ s’appelle Texte alternatif également :

Attribut alt texte alternatif chez Overblog

On voit donc avec ces 3 exemples concrets que les développeurs de CMS ainsi que les teams exploitant des plateformes de Blogs gratuits, mettent à disposition un champ dédié à ce fameux attribut Alt dont le Rôle est si important. Alors autant jouer le jeu et en profiter.

Vous trouverez sur quasiment tous les CMS et outils de créations de sites web et de blogs du marché cette fameuse balise ou champ où saisir votre texte alternatif. Si vous ne voyez pas ce champ au moment d’insérer une image ou une photo, vérifier si celui-ci ne doit pas être débloqué par une offre payante/premium. Et si toutefois ce champ est complètement absent, alors j’ose espérer que c’est aussi rare que c’est surprenant. Le fait est qu’en termes de SEO, ce sera un vrai manque à gagner pour votre site web. Tout comme ce sera regrettable pour l’expérience utilisateur, à savoir celle de l’internaute qui visitera votre espace web.

Conclusion

Pour compléter mon propos, je rajouterai que l’attribut Alt peut également jouer un rôle s’agissant d’un intranet. En effet, l’attribut alt tout comme le nom d’une image, pourront permettre selon le moteur de recherche existant sur un site interne (d’équipe, base de connaissance, FAQ dynamique, base documentaire de type GED, tableau de bord KPI avec des captures de graphiques…), de retrouver rapidement un schéma, un logo ou tout autre fichier de type image, se rapportant au sujet recherché. Alors si toutefois cette publication est orientée sur l’usage de cet attribut pour les photos et images mises en ligne sur un blog ou site web, cet attribut revêt sans qu’on le sache, d’autres rôles et fonctions non négligeables.

Alors, non, l’usage de cet attribut n’est pas négligeable. Je dirai même plus : Il devrait être beaucoup mieux connu pour être utilisé convenablement et permettre au blogueur ou webmaster, d’en tirer tout le potentiel.

Oui cela représente du travail lorsqu’on dispose de nombreux fichiers images à mettre en ligne. Cependant, il faut aussi se positionner non pas seulement comme celle/celui qui est aux manettes d’un blog, mais comme l’internaute ou le lecteur qui sera susceptible d’arriver sur votre espace web, et appréciera selon les conditions de connexions/navigateurs, de savoir ce que contenait une image qui peut-être n’aura pas pu s’afficher à un instant T. En pensant à l’utilisateur/lecteur/abonné, vous pensez à son expérience utilisateur lorsqu’il parcourt votre blog. Et ça, c’est aussi la base d’un Blogging tourné pas seulement sur soi mais aussi vers le confort de ses lecteurs :) Ce qui j’en suis sûre, fait partie de vos préoccupations, notamment car en plus de vous occuper de votre propre blog, vous êtes aussi un(e) internaute, un(e) abonné(e) ou lectrice/lecteur de Blogs…

Sans oublier bien entendu, tous les autres gains directs ou indirects à utiliser cet attribut :)

Et puis 4 ou 5 mots à ajouter pour décrire une photo, il y a pire non ? Cela vaut donc la peine de se donner cette peine !

Sur ce, je vais aller vérifier si certains des attribut alt des photos de mes blogs sont convenables, car le mot de la fin et la bonne nouvelle, c’est que vous pouvez modifier cette information a posteriori, c’est à dire quelques jours après mise en ligne d’une image ou photo. Même si l’idéal est de le faire One shot, pour être tranquille ;)

Par ailleurs, notez que je propose un accompagnement dans le traitement des photos de sites web et blogs.

Allez zou !

Grisélidis

 

Partager ce contenu :
Griselidis
Griselidis

Heureuse maman d'un petit garçon né en 2018, je tiens aujourd'hui quatre blogs. Après 17 années passées dans une grande entreprise de téléphonie, je travaille désormais en tant que webmaster freelance à mon compte depuis 2015.

Newsletter

Saisissez votre adresse e-mail ci-dessous et abonnez-vous à la newsletter

2 commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

  1. Merci beaucoup pour cet article clair et instructif ! ça faisait longtemps que j’entendais parler de cette fameuse balise Alt mais sans comprendre à quoi elle servait, la différence avec le titre et la légende, ni comment la renseigner sur WordPress. Je vais tout de suite aller faire un peu de ménage sur les images de mon blog :)

  2. Bravo pour cet article très complet. Il me semble toutefois que vous n’avez pas abordé un petit point important qui concerne les navigateurs pour malvoyants. Lorsque l’image est encadrée par un lien, il convient d’avoir une balise alt qui présente le contenu de la page de destination plutôt qu’une description de la photo. C’est notamment important quand l’image en question a graphiquement été enrichie de texte pour présenter une offre commerciale par exemple.

    Pour avoir eu l’occasion à de nombreuses reprises de discuter avec des malvoyants sur leur expérience utilisateur, il semble qu’il est parfois souhaitable, dans leur perspective, de ne pas renseigner de balise ALT quand l’image n’apporte rien de particulier. Je pense aux éléments de décors ou aux images en background par exemple.