Les images accessibles et WordPress
Ajouter des images à son site Web est une excellente façon d’augmenter l’attractivité et de présenter les informations de manière visuelle. Cependant, il est important de garder à l’esprit que les images doivent également être accessibles aux personnes qui ne peuvent pas voir le contenu du site. Lors du téléversement de vos images sur votre site WordPress, il y a plusieurs champs que vous pouvez remplir pour les rendre plus accessibles en plus de les rendre plus favorables au SEO. Également, s’assurer de les optimiser procure aussi des avantages au niveau de l’accessibilité Web.
Résumé de l’article:
WordPress et les images accessibles
Lorsque vous téléversez une image dans la librairie médias de WordPress, plusieurs champs s’affichent. Ces champs sont optionnels, mais peuvent grandement contribuer à rendre vos images plus accessibles et bénéfiques au SEO.
Texte alternatif: Ce champ est celui qui permet de remplir l’attribut « alt » de l’image. En résumé, l’attribut « alt » permet d’ajouter une description à l’image sous la forme d’une phrase complète. Cet attribut est particulièrement important et nous l’explorerons en détail plus loin dans cet article.
Légende: Le champ légende ajoute un texte qui sera visible sous l’image. Vous pouvez y ajouter une description de votre image plus détaillée que le texte alternatif. Remplir ce champ n’est pas absolument nécessaire, mais il peut permettre aux visiteurs de votre site de mieux comprendre le contexte de l’image.
Attribut « Title » de l’image: L’attribut « title », lorsque rempli et ajouté à une image, permet de voir un texte au survol de l’image avec la souris. Cette fonctionnalité n’est pas disponible sur tous les navigateurs Web et ne procure pas vraiment d’avantages côté SEO – tant et aussi longtemps que l’attribut « alt » est rempli, du moins. Par conséquent, nous ne l’utilisons pas chez Chocolat Média.
Par contre, l’attribut « title » n’est pas à confondre avec une autre forme de titre qui peut être attribué à l’image et qui, bien au contraire de ce dernier, est bien plus important: le nom du fichier lui-même. Nous parlons bien ici du nom de fichier que l’image porte sur votre appareil, donc image.jpg par exemple. Ce nom indique à Google la signification de l’image et peut influencer sur le SEO. Il est donc important de veiller à ne pas lui laisser son nom par défaut, comme DC123456.jpg ou Capture d’écran, le 2022-10-28 à 15.41.30.png. Donnez-lui plutôt un nom significatif, comme equipe-de-chocolat-media.jpg ou girafes-au-zoo-de-granby.png. Une courte phrase, préférablement différente du texte alternatif, en séparant les mots par un tiret.
L’attribut « alt » en détail
L’attribut « alt » – ou texte alternatif – de l’élément Image est un texte de secours donné à une image au cas où elle ne peut pas être affichée par le navigateur ou vue par l’utilisateur. Fournir cet attribut est donc absolument essentiel d’un point de vue d’accessibilité Web puisqu’il s’agit du seul moyen pour un visiteur malvoyant de se faire communiquer l’image. Le texte de l’attribut « alt » leur sera alors lu à voix haute par un lecteur d’écran Text-to-speech (TTS) ou indiqué tactilement par un clavier braille.
Il s’agit également du texte qui sera affiché si l’image ne peut pas être affichée par le navigateur. Il y a plusieurs raisons pourquoi cela pourrait se produire: une image manquante, des problèmes de serveurs, une bande passante défaillante du côté de l’utilisateur, ou l’utilisateur les a désactivées par soucis d’économie.
L’attribut « alt » est aussi très important pour le SEO puisqu’il permet aux moteurs de rechercher de mieux comprendre le contexte de l’image et de mieux l’indexer.
Astuces pour des textes alternatifs pertinents
Compte tenu de son importance, non seulement est-il capital de le remplir, il devrait être rempli avec un texte de qualité. Pour mieux vous mettre en contexte, MDN Web Docs offre cette astuce: « Lorsque vous choisissez un texte alternatif pour vos images, imaginez ce que vous diriez si vous lisiez la page à quelqu’un au téléphone sans mentionner qu’il y a une image sur la page. »
Structurellement parlant, nous recommandons une phrase concise mais complète, avec la ponctuation appropriée: débuter par une lettre majuscule, terminer par un point et ajouter les virgules si nécessaires. Utiliser cette ponctuation permet aux lecteurs TTS de lire le texte alternatif avec un débit humain et facile à comprendre.
Le contexte est aussi très important. La phrase décrivant l’image doit être pertinente par rapport à la page et au site qui la contiennent. Prenons l’exemple d’une image présentant un homme faisant du vélo en milieu urbain. Simplement la décrire comme « Un homme traversant la ville à vélo. » serait approprié d’un point de vue structurel, mais manquerait de détails d’un point de vue SEO et forcerait l’utilisateur à comprendre le contexte lui-même d’un point de vue d’accessibilité Web. Si l’image est sur le site Web d’un marchand de vélos, il serait préférable de mentionner la marque du vélo présenté. S’il s’agit plutôt d’un blog touristique, il serait plus pertinent de mentionner la ville où l’homme fait du vélo.
L’attribut « alt » devrait toujours être présent sur un élément Image. Par contre, il existe des exceptions où celui-ci devrait être laissé vide (ex.: alt="") ou modifié.
- Les images décoratives: Si une image est ajoutée à une page Web à but purement décoratif, afin d’agrémenter visuellement l’article, son texte alternatif devrait être laissé vide. En effet, remplir les attributs « alt » de ces images ne fait que d’ajouter du bruit pour les lecteurs TTS et nuit à l’accessibilité.
- Les images dont le contexte est déjà expliqué par une légende ou un autre texte situé près de l’image. Une image suffisamment bien décrite par sa légende ou le texte adjacent n’a pas besoin d’un texte alternatif. Ce texte serait redondant et ajouterait encore une fois du bruit pour les lecteurs TTS.
- Les images liées: Le texte alternatif d’une image menant vers une autre page ne devrait pas décrire l’image. Plutôt, il devrait simplement indiquer le titre de la page vers laquelle le lien dirige. Si ce titre est déjà indiqué par une légende ou un texte adjacent, tout comme l’exemple précédent, l’attribut « alt » devrait alors rester vide.
- Évitez de mentionner qu’il s’agit d’une image ou d’une photo. Ce détail est implicite et redondant. Les lecteurs TTS annoncent d’ailleurs déjà qu’il s’agit d’une image lorsqu’elle est sélectionnée. Par contre, ce n’est pas une règle absolue. Utilisez votre meilleur jugement: si la mention du type de support média est pertinente dans le contexte, mentionnez-le. Le contexte est ce qui compte le plus.
Le texte alternatif est un élément important de l’accessibilité Web et du référencement. En ajoutant du texte alternatif à vos images, vous vous assurez que les personnes malvoyantes ou utilisant un lecteur d’écran peuvent comprendre le contenu de votre image. Vous fournissez également aux moteurs de recherche plus d’informations sur vos images afin qu’ils puissent les classer plus haut dans les résultats de recherche. Chez l’agence Web Chocolat Média, nous sommes spécialisés dans la conception de sites Web accessibles et adaptés au référencement. Contactez-nous dès aujourd’hui pour remplir votre texte alt pour toutes les images de votre site Web WordPress !
