Des éléments d’image n’ont pas d’attribut [alt]. C’est le message que vous obtiendrez probablement au moins une fois si vous testez des pages de votre site web sur PageSpeed Insights (aka PSI°. En effet, l’outil gratuit de Google qui sert à mesurer diverses critères dont les performances sait détecter s’il manque l’attribut alt.
Alors qu’est-ce que l’attribut alt et comment l’ajouter pour ne plus avoir ce message de la part de l’outil PSI ?
Sommaire
L’attribut alt c’est quoi ?
Si on veut simplifier les choses, les photos et images sur le web devraient idéalement avoir deux informations renseignées une fois téléversées sur un CMS comme WordPress ou autre :
- Le titre ou nom
- Le champ alternatif = attribut ALT
L’attribut ALT peut porter un nom différent selon la plateforme de site web ou le CMS utilisé pour afficher un site internet. Sur WordPress, cette information peut être saisie via le champ qui s’appelle “Texte Alternatif“. Sur Shopify il s’appelle aussi “Texte alternatif“.
Cette information doit la plupart du temps être saisie à la main. Et elle devrait dans un monde parfait décrire le sujet de l’image ou de la photographie numérique.
L’exemple le plus couramment utilisé pour illustrer la façon dont l’attribut ALT devrait être renseigné est celui de la photo du chat qui dort, pour laquelle l’attribut ALT devrait donc être : Chat qui dort sur une table…
Prenons l’exemple d’une autre photo à savoir celle qui suit. L’attribut ALT devrait idéalement être quelque chose comme : “Photo d’une table avec une tasse en arrière plan et un écran de tablette éteinte”.
Il se trouve que dans divers cas, l’attribut alt souffre de plusieurs usages assez détournés ou à déplorer :
- Le champ attribut alt est souvent complètement vide. Par méconnaissance de cette information, par oubli et/ou parce que beaucoup ne savent tout simplement pas l’intérêt SEO et utilisateur que ce champ peut avoir.
- Le champ attribut alt est hélas souvent utilisé pour enchaîner un presque spam de mots clés relatifs au contenu et/ou site web où les images concernées sont mises en ligne.
Comment ajouter l’attribut alt manquant ?
Tout dépend de l’outil, plateforme ou CMS que vous utilisez pour votre site web. Toutefois, voici différentes façons de renseigner l’attribut ALT pour plusieurs plateformes :
Ajouter l’attribut ALT sur Shopify
Sur Shopify, l’attribut ALT s’appelle texte alternatif :
Vous pourrez la renseigner dès téléversement de votre image. C’est recommandé pour tout type d’images : Produits, icônes, photos.
Ajouter l’attribut ALT sur WordPress
Sur WordPress, l’attribut ALT est également le champ “Texte alternatif” :
Attribut Alt sur Blogger
Idem chez Blogger la plateforme gratuite de Blogging made in Google où le champ pour mettre l’attribut ALT se nomme aussi “texte alternatif” :
Attribut Alt chez OverBlog
Idem sur la plateforme OverBlog :
Faut-il mettre un attribut ALT aux icônes et logos ?
Il y a deux écoles concernant le besoin ou non de mettre un attribut ALT aux icônes et Logos. C’est à dire à des éléments ornementaux sur un site web. Beaucoup, dont des outils, indiquent que ce n’est pas nécessaire.
Une autre école tend à pousser à renseigner un attribut ALT quelle que soit l’image, photo ou élément décoratif comme une icône ou un Logo.
En l’occurrence, avec PageSpeed Insights, ce texte alternatif = attribut ALT est réclamé même pour les icônes et LOGOS. Alors j’aurais tendance à recommander à mettre un court et simple texte alternatif comme :
- Logo + nom de l’entreprise (ou nom du site web…)
- Icône + de qu’elle représente ou ce vers quoi elle envoie si elle dispose d’un lien
Saisir une fois cet attribut ALT ne prendra que quelques minutes et ce sera un job fait pour toujours. Il serait donc dommage de s’en priver. Surtout si ça peut éviter d’avoir le fameux message “Des éléments d’image n’ont pas d’attribut [alt]” lorsque vous testez des page de votre site web sur Pagespeed Insights (=PSI).
J’ai ajouté l’attribut ALT mais PSI le réclame encore
Il se peut qu’après un test de page sur PSI vous ayez obtenu le message : Des éléments d’image n’ont pas d’attribut [alt], et que bien que vous ayez ajouté le fameux attribut, il vous le redemande après d’autres tests. Cela arrive si vous testez très vite après votre ajout de l’attribut la page concernée.
En l’occurrence, vérifiez si vous avez bien enregistré votre ajout de l’attribut ALT. Si oui, patientez un peu et videz votre cache de site web si vous en avez un 🙂
Ensuite dans la journée généralement, PSI cessera de vous restituer ce message lors du test de la même page pour laquelle les attributs ALT sont désormais ajoutés ! =)
Les messages de PageSpeed Insights relatifs aux images et photos
L’outil PSI ne fait pas de cadeau aux propriétaires de sites web concernant les images. En effet, il peut restituer beaucoup de messages parfois décevants et anxiogènes quand on teste des pages. Il peut notamment indiquer :
En l’occurrence, il est important de retenir qu’il s’agit d’un outil de test qui sert des résultats qui font office de recommandations. Il n’est jamais obligatoire d’appliquer des corrections. Ces dernières sont souhaitables bien sûr, mais il faut relativiser. Et si vous souhaitez agir, prenez par exemple les choses dans l’ordre.
- Priorisez les éléments en rouge
- Priorisez le traitement des images aux tailles/dimensions vraiment trop grandes/lourdes
Et bravo si vous tentez de résoudre ces quelques corrections seul(e)s sans être webmaster ou habitué(e)s ! Car c’est parfois loin d’être accessible !