Table des matières
Le texte alternatif, également connu sous le nom de « alt texte », est une description courte d’une image qui permet de comprendre cette image lorsqu’elle ne peut pas être visualisée pour une raison quelconque.
Le texte alternatif bien rédigé est important pour l’accessibilité de votre site web et son optimisation pour les moteurs de recherche (SEO).
Accessibilité
Le texte alternatif est lu par les lecteurs d’écran à la place des images, ce qui permet aux personnes aveugles ou ayant une déficience visuelle d’accéder au contenu de l’image.
Il peut également être utile aux personnes ayant certains troubles de traitement sensoriel et/ou d’apprentissage.
Il est affiché à la place de l’image dans les navigateurs si le fichier image n’a pas été chargé, ou lorsque l’utilisateur a choisi de ne pas afficher les images.
SEO
Un bon texte alternatif fournit une signification sémantique et une description d’une image, ce qui est utilisé par les moteurs de recherche pour renvoyer des résultats de recherche. En fournissant une description réfléchie et utile de tout votre contenu aux utilisateurs, il est plus facile pour les robots des moteurs de recherche de le comprendre également.
Saviez-vous que vous pouvez également ajouter du texte alternatif aux images et aux gifs animés que vous téléchargez sur Twitter ? Cela permet aux personnes utilisant des technologies d’assistance telles que les lecteurs d’écran et les affichages braille d’avoir accès à la description écrite. Même si vous n’utilisez pas de technologies d’assistance, vous pouvez toujours accéder au texte alternatif en sélectionnant l’étiquette « ALT », qui ouvre le texte alternatif dans une boîte modale. C’est un outil pratique pour améliorer l’accessibilité (et la recherche), qui ne semble toujours pas être largement utilisé dans le secteur. N’oubliez pas d’ajouter du texte alternatif la prochaine fois que vous tweetez une image ! 🤓
Conseils pour rédiger un bon texte alternatif
Ajouter un texte alternatif utile aux images est l’un des moyens les plus simples de rendre votre site web plus accessible. Cependant, ce n’est pas nécessairement facile à maîtriser et cela peut même nuire à l’accessibilité s’il est mal fait. Il vaut mieux ne pas ajouter de texte alternatif que d’ajouter un texte alternatif mauvais (c’est-à-dire ennuyeux ou sans signification).
Voici quelques conseils pour vous aider à bien faire :
1. Soyez précis et concis
Décrivez le contenu de l’image sans faire de commentaires. Dites ce que vous voyez et ne faites pas d’hypothèses sur l’ethnicité, le genre, ce qui se passe hors champ, les motivations d’un sujet, etc.
Cependant, soyez descriptif sur ce que vous voyez. Ajouter des informations sur la couleur de peau, la couleur/style des cheveux, etc. aidera à créer une image pour quelqu’un qui ne peut pas voir l’image.
L’une des meilleures suggestions que j’ai entendues est de réfléchir à la façon dont vous décririez brièvement l’image au téléphone. Quelques mots suffisent généralement, bien que parfois une phrase complète soit nécessaire. Gardez à l’esprit que les lecteurs d’écran peuvent couper le texte alternatif à environ 125 caractères, donc il vaut mieux respecter cette limite. (Euh, généralement – lisez l’avertissement de contexte)
2. Ne commencez jamais par « Image de… » ou « Photo de… »
Il sera évident pour une personne ou une machine lorsque quelque chose à quoi elle accède est du texte alternatif.
Imaginez à quel point il serait frustrant d’utiliser un lecteur d’écran sur une page riche en images et d’entendre : « Image du théâtre », « Image de la salle d’accueil », « Image de la signalétique extérieure », « Image de l’équipe de billetterie », « Image de l’auditorium », « Image de la scène »… Arrrgh !
Cependant, il est bon d’aider les gens à comprendre le contexte, donc expliquer le type d’image – par exemple, photo d’identité, illustration, graphique, capture d’écran – peut être utile.
3. Utilisez les mots clés avec parcimonie
Si vous pouvez intégrer un ou deux mots clés pertinents lors de la description d’une image, c’est génial. Cela aidera votre référencement. Mais seulement si cela est fait de manière véridique et parcimonieuse.
Les moteurs de recherche ne peuvent pas reconnaître les textes alternatifs « mauvais » (c’est-à-dire non utiles) sur le plan contextuel, mais vous pourriez être pénalisé pour surcharge de mots clés. Google peut le détecter ! Votre objectif principal doit donc être de décrire de manière spécifique et concise les images nécessitant un texte alternatif.
4. Inclure le texte qui fait partie de l’image
Lorsque du texte est inclus dans une image, assurez-vous de le transcrire en tant que partie de votre description. Sauf si cela signifie se répéter…
5. Ne vous répétez pas
Le texte alternatif n’est pas nécessaire s’il répète ce qui est déjà présent sur la page. Par exemple, une légende adjacente. Ou si une « image » d’un événement est un titre fortement conçu et que vous êtes déjà sur la page de l’événement, il n’est pas nécessaire d’ajouter le titre de votre spectacle comme texte alternatif. Pourquoi ? Parce qu’il est déjà là dans l’en-tête de la page.
6. N’ajoutez pas de texte alternatif aux images « décoratives »
Les images « illustratives » sont des choses comme des photos de votre lieu ou des images de presse d’un spectacle. Elles aident à transmettre des informations, dans un contexte. Les images « décoratives » comprennent des choses comme des séparateurs de page ou des graphiques de marque. Elles rendent les choses jolies ou cassent visuellement le contenu d’une page. Elles n’ont pas de signification ou de pertinence contextuelle, elles n’aideront donc pas les gens à mieux comprendre la page si elles ont un texte alternatif. Idéalement, toutes les images décoratives doivent être incluses dans votre code plutôt que d’être ajoutées en tant que « contenu ». Si elles doivent être téléchargées en tant qu’images, ne pas ajouter de texte alternatif est acceptable – les lecteurs d’écran les ignoreront simplement, ce qui est ce que nous recherchons dans ce scénario.
🙋 L’avertissement de contexte, c’est-à-dire quand ignorer le conseil n°1 et ajouter plus de détails
Lorsque le principal contenu de votre site est une image et/ou lorsque l’émotion transmise par cette image ajoute quelque chose de supplémentaire au contenu qui l’entoure, vous pouvez choisir de décrire cette image avec un texte alternatif plus long et plus détaillé. Lorsqu’une image est le principal contenu de votre site : De bons exemples de texte alternatif très détaillé sont les descriptions d’images prises par le télescope spatial James Webb de la NASA, qu’ils ont partagées sur Twitter. Ces vues incroyables, merveilleuses et complexes de l’univers demandent des descriptions très détaillées. Par exemple, voici seulement environ un tiers du texte alternatif pour une image de la nébuleuse de Carina : « L’image est divisée horizontalement par une ligne ondulée entre un paysage de nuages formant une nébuleuse sur la partie inférieure et une partie supérieure relativement claire. Des étoiles de différentes tailles parsèment les deux parties. Les plus petites sont de petites lumières lointaines et faibles. »
Transmettre des émotions par le texte alternatif : Les images ne donnent pas seulement des informations pratiques et spécifiques, elles peuvent aussi transmettre des émotions. Cela est particulièrement vrai dans le domaine des arts. Par exemple, décrire un décor de scène, les costumes des personnages, leurs positions et leurs expressions faciales ne suffit pas à expliquer pleinement l’image à quelqu’un qui ne peut pas y accéder.
S’agit-il d’un sourire de joie et de bonheur ? Ou cache-t-il clairement une profonde et désespérée tristesse ? Quelles émotions ressentez-vous en regardant l’image – et peuvent-elles être (raisonnablement) traduites en texte alternatif ? Être conscient du contexte permet d’écrire occasionnellement un texte alternatif plus créatif que ce que les directives de base de « bonnes pratiques » suggèrent, mais le conseil n°1 – Soyez précis et concis – reste généralement vrai la plupart du temps.
Testez votre texte alternatif :
Lisez vos descriptions d’images à voix haute, dans le contexte du reste du contenu de la page. Si cela a du sens et ajoute quelque chose de utile – c’est un bon texte alternatif !
Exemples de texte alternatif
Mauvais : Nous sommes en gros plan sur le visage d’un ours brun, parfois appelé ours grizzly, regardant majestueusement vers l’horizon. Peut-être a-t-elle faim ou a-t-elle repéré une menace ? Si vous devez dire autant de choses, ajoutez-le dans le texte de la page. Gardez le texte alternatif court. Et n’oubliez pas de ne faire aucune supposition.
Mauvais : ours, ours brun, grizzly, ours grizzly, mammifère, carnivore. Lisez cela à voix haute. Ce n’est pas utile – et Google n’aimera pas ça.
Correct : Ours brun.
C’est bien, mais vous pourriez décrire l’image de manière plus précise.
Bon : Gros plan du visage d’un ours.
Cela donne une compréhension claire de ce qui se trouve dans l’image en seulement quelques mots, sans faire de suppositions. (Je ne suis pas totalement sûr du type d’ours dont il s’agit 🤷)
Mauvais : Panneau. C’est vraiment peu utile – que signifie « panneau » ? Est-ce une instruction pour ajouter une signature ? De la langue des signes ? Un signe astrologique ? Il vaut mieux ne pas ajouter de texte alternatif que cela.
Mauvais : restauration à emporter, fish and chips, poisson, frites, boutique, nourriture, restauration rapide. Arrêtez de bourrer de mots clés !
Correct : Panneau « Restauration à emporter ».
Ce n’est pas mal, mais ça pourrait être mieux…
Bon : Panneau « Fish & chips à emporter ».
Une description claire de l’image, y compris le texte du panneau, sans entrer dans des détails excessifs et inutiles. Nous n’avons pas besoin du texte supplémentaire « Également de nombreux autres plats et boissons » pour comprendre clairement l’image.
Plante d’intérieur sur un rebord de fenêtre
Mauvais : Plante d’intérieur sur un rebord de fenêtre. Qu’est-ce qui ne va pas ? C’est descriptif, clair, court… ? Cela répète la légende – pas besoin !
Bon : {rien}
Avec une légende qui la décrit joliment, pas de texte alternatif, c’est un bon texte alternatif pour cette image.
Vous souhaitez améliorer davantage l’accessibilité et l’inclusivité de votre site web ? Vous aimerez peut-être notre article populaire, Comment rédiger un excellent texte web. Nous avons également une collection pratique de ressources gratuites sur l’accessibilité 🧡.
