Les images et les graphiques rendent les contenus agréables et plus faciles à comprendre, en particulier pour les personnes souffrant de troubles cognitifs et/ou d’apprentissage. Ils servent de points de repère aux personnes souffrant de déficiences visuelles. Les personnes malvoyantes y compris, pour s’orienter dans le contenu.
Une image ou un graphique sans attributs alternatifs appropriés ou vides (alt text) rend extrêmement frustrant pour les personnes déficientes visuelles de naviguer sur le site à l’aide de technologies d’assistance. Les alternatives des images mettent des informations précieuses pour les utilisateurs de lecteurs d’écran pour malvoyants ou non-voyants. Cet article présente des exemples pratiques d’alt text pour bien intégrer ces balises sur un site web.
Pertinence du alt text pour le référencement
Les pages de résultats des moteurs de recherche (SERP) de Google contiennent désormais autant de résultats d’images que de résultats de texte.
Avant que des résultats textuels organiques ne soient disponibles, Google fait apparaître un énorme paquet d’images cliquables en haut de la page de résultats principale.
Malgré tous les efforts de référencement, les images de votre site web peuvent être une source de trafic organique que vous ratez. Comment obtenir une partie de ce précieux trafic ? La réponse est un alt text.
Vous savez ce qu’est l’alt text ? Le premier concept de l’accessibilité Web est d’inclure un alt text pour les images. C’est aussi le plus difficile à mettre en pratique correctement. Il y a des images sur le net avec un texte alternatif incomplet, erroné ou mauvais.
Déterminer un alt text approprié, comme tant d’autres aspects de l’accessibilité Web, c’est souvent une question d’interprétation personnelle. Cet article présente donc notre compréhension expérimentée du bon usage du alt text avec des exemples.
Les sujets sur lesquels les entreprises et les éditeurs créent du contenu exigent de plus en plus que des images accompagnent les mots.
Si vous écrivez sur la photographie, des exemples photographiques de la perspective sont indispensables pour le plaisir du lecteur. Les captures d’écran de logiciels sont souvent superbes pour illustrer comment les utiliser.
C’est quoi l’alt text et comment ça marche ?
Image de site d’utilisateur Strikingly
Qu’est-ce qu’un alt text ? L’alt text est un genre de code HTML qui décrit l’apparence et l’objectif d’une image sur une page web.
Si une image sur un site ne parvient pas à se charger sur l’ordinateur d’un utilisateur, l’alt text est une copie écrite qui s’affiche à sa place. L’alt text aide les logiciels de lecture d’écran à décrire les images aux lecteurs malvoyants. Ça permet aux moteurs de recherche d’explorer et de classer efficacement les sites web.
L’optimisation de l’image et de l’alt text d’un site web offre aux visiteurs une meilleure expérience utilisateur.
Utilisations des alt texts
- Ajouter un alt text aux images est, avant tout, un concept d’accessibilité web. Un alt text lu aux utilisateurs malvoyants avec des lecteurs d’écran les aide à comprendre une image sur la page.
- Si un fichier image ne peut pas être chargé, l’alt text s’affiche à sa place.
- Les alt texts donnent aux robots d’exploration des moteurs de recherche un meilleur contexte/description des images. Ça les aide à indexer correctement une image.
Trois exemples d’alt text
1. Quelle est la différence entre un mot-clé et un détail ?
Mauvais alt text : « Page d’accueil de Strikingly faire un site en quelques minutes, créer un site web. »
C’est quoi le problème avec cette ligne d’alt text là-haut ? Il y a beaucoup trop de références à Strikingly. L’utilisation de l’alt text pour entasser des mots-clés dans des phrases incomplètes n’ajoute pas assez de sens à l’image. Le rédacteur apprécie ces mots-clés. Mais pas Google.
En fait, le texte ci-dessus donne du fil à retordre à Google pour comprendre comment l’image se rapporte au reste du site web ou à l’article sur lequel elle se trouve. Ça rend impossible le classement de l’image pour des mots-clés similaires.
Bon alt text : « Page de connexion du constructeur de site Strikingly »
2. Spécificité ou détail
Mauvais alt text : « Transport à paris »
La ligne d’alt text ci-dessus suit logiquement la première règle de l’alt text. À savoir, être descriptif. Mais c’est incorrect. Oui, l’image ci-dessus représente un moyen de transport à Paris.
Mais c’est aussi une vue de la tour Eiffel, et d’une calèche. Si la photo est sur, disons, un article de blog sur le voyage en France, Google a besoin des détails pour l’indexer correctement.
Bon alt text : « Calèche près de la Tour Eiffel »
3. Contexte ou spécificité
La signification des deux images ci-dessus est simple. Ça nous aide à écrire de beaux alt texts : l’une vient du site Strikingly, et l’autre de Paris. Mais que faire si l’image manque de contexte officiel (p. ex. un nom de lieu) pour l’expliquer ?
C’est là que le sujet de l’article ou du site web s’avère utile.
Exemples de mauvais et de bons alt texts, selon la raison de la publication.
1. Pour un article sur l’utilisation d’un logiciel de comptabilité.
Mauvais alt text : « Homme pointant l’écran d’ordinateur d’une personne. »
Pourquoi la ligne d’alt text ci-dessus ne suffit pas pour une page web sur les logiciels de comptabilité ? C’est presque aussi descriptif et précis que le bon alt text de l’exemple précédent.
Cet exemple approfondit le sujet de l’école de commerce, en précisant que le public cible de cette page est constitué d’étudiants. Donc, l’alt text des images doit le représenter.
Bon alt text : « Homme d’affaires avec un logiciel de comptabilité pour instruire une équipe de comptables. »
2. Pour un article sur les études supérieures.
Mauvais alt text : « Homme montrant un écran d’ordinateur »
L’alt text ci-dessus devrait normalement faire l’affaire. Mais le but est de publier cette image à côté d’un article sur l’école de commerce. Donc nous avons des mots clés qui pourraient aider Google à lier l’image à des parties particulières de l’article.
Bon alt text : « Professeur d’école supérieure pointant l’écran d’ordinateur d’un étudiant. »
Utilité de l’alt text
1. Accessibilité
Un principe fondamental du open web design est l’alt text. Sa principale fonction est d’expliquer les images aux visiteurs non-voyants.
En associant l’alt text aux images, tous les utilisateurs, quelle que soit leur capacité visuelle, peuvent apprécier le contenu du site.
2. Optimisation des moteurs de recherche d’images
Inclure des alt texts sur les images n’est pas seulement bénéfique pour le client. Mais assure aussi des avantages pour le référencement. En plus de suivre les bonnes pratiques pour le titre de l’image et le nom du fichier, l’inclusion d’alt text aide au référencement des images.
La technologie de reconnaissance d’image s’est grandement améliorée avec le temps.
Mais les robots de recherche ne peuvent toujours pas « voir » les images sur une page de site comme nous le pouvons. Ce n’est donc pas une bonne idée de compter uniquement sur eux pour la compréhension. S’ils ne comprennent pas ou s’ils se trompent, vous serez classé pour des mots-clés non désirés ou vous manquerez complètement le classement.
Utilisez l’alt text de l’image pour inclure le mot-clé cible. Avec l’utilisation des mots-clés on-page toujours un facteur de classement pour les moteurs de recherche, il y a un intérêt à créer un alt text qui explique l’image tout en ayant, si possible, un mot-clé cible.
Comment optimiser l’alt text : bonnes pratiques
L’alt text des images doit être descriptif tout en étant représentatif de la page web qu’il supporte. Vous avez compris l’essentiel jusqu’ici ? Voici quelques points clés à retenir pour rédiger un alt text réussi pour le référencement.
- Donnez une description détaillée de l’image. Utilisez le sujet et la signification de l’image pour vous orienter. Soyez aussi descriptif que possible de l’image. Avant tout, l’alt text est destiné à donner des descriptions textuelles des images pour les utilisateurs non-voyants ou malvoyants. Si une image n’a aucune signification et qu’elle n’est là qu’à des fins de conception, elle doit être placée en CSS plutôt qu’en HTML.
- Gardez l’alt text à 125 caractères ou moins. Les outils de lecture d’écran cessent normalement de lire l’alt text à ce stade, coupant ainsi les alt texts interminables à des moments inconfortables.
- Ne pas commencer l’alt text par « photo de x » ou « image de y. » Passer directement au contenu de l’image. Les logiciels de lecture d’écran (et, d’ailleurs, Google) y reconnaîtraient une image dans le code source HTML.
- Faites usage des mots-clés. Mais faites-le avec parcimonie. Utilisez le mot-clé cible de l’article dans l’alt text, si c’est simple à faire. Sinon, pensez aux mots-clés sémantiques. Il s’agit des termes les plus pertinents d’un mot-clé de longue traîne. Le mot-clé principal de l’article est « comment utiliser planogrammes ? » Peut être utilisé « utilisations des planogrammes » dans l’alt text au lieu de « comment, » puisque « comment » est difficile à inclure dans un alt text.
- N’insérez pas le mot-clé dans l’alt text de chaque image. Mettez le mot-clé dans au moins une des images du corps de l’article si celui-ci en contient plusieurs. Choisissez une image qui représente parfaitement le sujet, et faites-en un mot-clé. Dans les médias environnants, restez-en aux détails esthétiques.
Les images ne doivent pas être utilisées comme du texte. C’est un principe général de développement web SEO plutôt qu’une pratique spécifique à l’alt text. Il faut arrêter d’utiliser des images à la place de mots car les moteurs de recherche ne peuvent pas lire le texte dans les images. Si nécessaire, utilisez l’alt text pour clarifier la signification des images.
Ajouter un alt text à l’image du site web
Maintenant vous avez compris l’intérêt de l’alt text comme outil de référencement et comment écrire un alt text agréable. Nous allons maintenant passer à la mise en place de l’alt text sur les images web avec Strikingly.
Mettre un alt text aux images individuelles :
Image tirée de Strikingly
- Dans l’éditeur web, naviguez vers l’image que vous voulez modifier.
- Passez la souris sur l’image. Choisissez « Éditer. »
- Pour mettre un alt text, cliquez sur « Ajouter une description. »
- Cliquez sur « Enregistrer. »
Mettre un alt text aux images dans les galeries :
Image tirée de Strikingly
- Dans l’éditeur du site, allez dans la section Galerie.
- Déplacez le curseur sur l’image. Choisissez « Éditer. »
- Pour mettre un titre à la photo, cliquez sur « Ajouter un titre ».
- Pour ajouter une description à la photo, cliquez sur « Ajouter une description. »
- Cliquez sur « Enregistrer. »
Les images dans les articles incitent les gens à les lire. De plus, des images bien choisies permettent d’obtenir un bon classement dans les résultats de recherche d’images. Mais n’oubliez pas d’ajouter aux images un alt text utile. L’alt text renforce le message des articles auprès des robots des moteurs de recherche et augmente la convivialité du site.
Créer un site web !
Image tirée de Strikingly
Un alt text fonctionne superbement lorsqu’il est bien écrit. Mais où publier ces images, articles et blogs ? Faites un site !
Strikingly a des centaines de modèles de sites web étonnants et gratuits à choisir. Il y a des modèles de sites de e-commerce, des modèles de sites de musique, des modèles de photographie et bien d’autres encore.
Tout ce que vous avez à faire est de choisir celui qui convient le mieux aux besoins de votre entreprise. Ensuite, inscrivez-vous gratuitement en quelques minutes. Enfin, personnalisez les pages en intégrant votre propre contenu et votre style.
Faire parler l’alt text
Vous créez des alt texts pour vos articles de blog et vos pages Web ? Pensez à effectuer un audit simple du contenu actuel pour déterminer où ajouter l’alt text aux images non marquées auparavant.
Tenez compte de la façon dont le trafic organique se déplace en mettant de nouveaux alt text aux pages. Plus vous affinez les images, plus la stratégie de référencement devient efficace. Pour plus de détails, contactez notre support chat !
