Dans un podcast Google Search Off the Record, Lizzi Sassman et John Mueller de Google discutent de la meilleure façon de gérer le texte alternatif pour les logos et les boutons basés sur des images.
Il existe des bonnes pratiques pour ajouter des attributs alt aux logos et aux boutons.
Les règles peuvent sembler un peu compliquées au début, mais elles sont en fait simples à comprendre.
Obtenir les bons attributs alt est bon pour les utilisateurs et à long terme, c’est excellent pour les revenus.
Ajout de texte alternatif aux images fonctionnelles
Lizzi Sassman lance la discussion en faisant référence aux images fonctionnelles, des images qui ont un but fonctionnel sur la page Web.
Elle demande si le texte alternatif doit décrire ce que fait le bouton ou ce que l’image sur le bouton est dans la situation où un bouton est une icône.
Enfin, elle demande s’il y a un but SEO à ajouter du texte alternatif à des images fonctionnelles comme des boutons.
« Lizzi Sasman :
…Le niveau d’attention que nous accordons à l’actif visuel, nous devrions également mettre le même niveau d’énergie dans les mots qui décrivent cet atout également. Ce que je trouve génial.Une autre catégorie d’images est comme la chose fonctionnelle, qui peut parfois être un bouton.
Comme si c’était un graphique qui fonctionnait aussi comme quelque chose.
Alors, le texte alternatif devrait-il me dire ce qui va se passer ?
Si vous cliquez dessus, cela vous amènera ici ?
Cela pourrait être comme une image de quelque chose, qui fonctionne alors aussi comme un bouton.
Et décrivez-vous la fonction, ou comme c’était aussi, je ne sais pas… comme une image de flèche ?
Et aussi, est-ce important pour le référencement ?
Jean Muller :
Ouais. Je pense…Lizzi Sasman :
Cela pourrait être comme un logo.Jean Muller :
Pour l’accessibilité, cela a probablement du sens, de simplement faire quelque chose autour de cela.Mais pour le référencement, les gens ne vont pas chercher le bouton de paiement, ou quelque chose comme ça. »
Le texte alternatif sur les boutons est destiné à l’accessibilité et non au référencement
John Mueller précise qu’il n’y a aucun but SEO pour l’ajout de texte alternatif aux boutons.
Mais il a également observé que le texte alternatif de ce type d’images est principalement destiné à des raisons d’accessibilité.
Lizzi a poursuivi la discussion :
« Lizzi Sasman :
… Mais peut-être qu’ils le feraient pour le logo, ou quelque chose comme le logo. Lorsque vous cliquez dessus, cela vous amène à la page d’accueil, ou quelque chose comme ça.Mais c’est aussi « Oh, c’est un logo ».
Alors dites-vous, « Ceci est le logo de Google Search Central. »
Jean Muller :
Bien sûr.Lizzi Sasman :
Ou comme ce qui serait un texte descriptif.C’est Googlebot dans le logo, mais la chose la plus importante à savoir sur l’image est-elle le fait qu’il s’agit d’un logo ?
Ou à quoi ressemble le logo ?
Je suppose que sous cet angle, les gens recherchent probablement le logo.
Jean Muller :
Ouais.Lizzi Sasman :
Comme quel est le logo de la société X, peut-être ?
Jean Muller :
Ouais. Je veux dire, cela revient à une sorte de stratégie que nous essayons d’éviter.Pourquoi voulez-vous être trouvé?
Lizzi Sasman :
Oui, mais c’est la question la plus importante, je suppose, parce qu’alors ça tourne en quelque sorte…Je peux me laisser emporter par tous ces trous de lapin, donc ça donne en quelque sorte, je ne sais pas, la priorité aux choses auxquelles nous devrions penser, parce que vous n’avez pas nécessairement besoin d’écrire toutes les choses pour ces choses, Je suppose. »
L’utilisation appropriée du texte alternatif sur les logos et les boutons
La bonne façon d’utiliser le texte alternatif sur des images comme les logos dépend en fait si l’image est un lien ou non.
Si l’image du logo fonctionne comme un lien vers la page d’accueil, il est alors correct d’étiqueter cette image avec la fonction qu’elle a, de sorte qu’un visiteur du site utilisant un lecteur d’écran ne puisse pas que ce logo soit un lien vers la page d’accueil.
L’organisme officiel de création de normes HTML, le World Wide Web Consortium (W3C) publie un explicatif sur la façon de gérer les logos.
Lien vers la page d’accueil du logo
Un logo qui fonctionne comme un lien vers la page d’accueil doit contenir un texte alternatif indiquant à l’utilisateur d’un lecteur d’écran que le logo est un lien vers la page d’accueil.
Le W3C utilise cet exemple de code :
<a href="https://www.w3.org/"> <img src="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/w3c.png" alt="W3C home"> </a>
Le code ci-dessus correspond à un logo que l’on peut rencontrer en haut de la page et qui sert également de lien vers la page d’accueil.
L’exemple de texte alternatif fourni par le W3C indique simplement «W3C home», mais il pourrait être plus descriptif si vous le souhaitez.
Logo et texte Lien vers la page d’accueil
Il existe d’autres types de liens de logo où il y a un logo d’image et un texte juste à côté ou en dessous et l’image et le texte sont codés dans le même code de lien.
En d’autres termes, il n’y a pas deux liens comme un lien pour le logo et un lien pour le texte, c’est juste un lien pour le logo et le texte ensemble.
Dans ce cas, puisque le texte décrit la fonction du lien, il serait répétitif de répéter la fonction du lien logo.
Donc, dans ce cas, la meilleure pratique consiste à utiliser un texte alternatif nul.
Voici l’exemple fourni par le W3C :
<a href="https://www.w3.org/"> <img src="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/w3c.png" alt=""> W3C Home </a>
Notez comment l’attribut alt est codé pour l’image :
img src="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/w3c.png" alt=""
Les guillemets vides pour le texte alt sont appelés un attribut alt nul (ou texte alt nul). Un lecteur d’écran l’ignorera simplement.
La raison pour laquelle un texte alternatif nul est bon est qu’il y a un texte qui décrit ce qu’est la fonction de lien :
Accueil du W3C
Texte alternatif pour un lien d’icône
Parfois, un lien se présente sous la forme d’une icône, sans texte pour expliquer ce qu’il fait, par exemple une icône sous la forme d’une enveloppe (représentant un e-mail ou un message) ou une imprimante (qui indique que le lien active une imprimante).
Dans cette situation, il est déconseillé de décrire ce qu’est l’image (comme une enveloppe ou une imprimante).
La meilleure pratique consiste à décrire ce que fait l’image (lancer un e-mail ou imprimer une page Web).
Le W3C utilise l’exemple d’une icône d’imprimante avec le code et le texte alternatif suivants :
<a href="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/javascript:print()"> <img src="print.png" alt="Print this page"> </a>
Comme vous pouvez le voir, l’icône en forme d’imprimante a les mots « Imprimer cette page » comme texte alternatif. Il indique ce que fait l’icône. C’est utile.
Texte alternatif pour un bouton
Semblable à l’exemple de l’icône, le texte alternatif d’une image de bouton doit décrire ce que fait l’image.
Le W3C utilise l’exemple d’une boîte de recherche qui a une loupe pour un bouton d’envoi.
La mauvaise façon de le faire est d’utiliser le texte alternatif pour décrire que l’image est une loupe.
La meilleure pratique consiste à utiliser le texte alternatif pour décrire ce que fait l’image.
Voici l’exemple de code que le W3C montre comme exemple :
<input type="image" src="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/searchbutton.png" alt="Search">
Comme vous pouvez le voir, le texte alternatif du bouton de recherche est le mot « Rechercher » qui décrit la fonction du bouton.
Texte alternatif pour les boutons et les logos
Lizzi et John ne sont pas entrés dans les détails de la gestion des différents scénarios pour les logos et les boutons.
Cependant, John a souligné qu’il n’y a pas de valeur SEO pour le texte alternatif des boutons et des logos, c’est pour l’accessibilité.
Il est recommandé de diffuser de manière appropriée des pages Web fonctionnelles pour les utilisateurs qui accèdent à des pages Web avec des lecteurs d’écran.
Comme mentionné précédemment, les personnes qui utilisent des lecteurs d’écran peuvent être des clients ou des défenseurs de votre entreprise ou de votre site Web.
Il est donc bon pour le résultat net d’utiliser les meilleures pratiques d’accessibilité.
Citations
En savoir plus sur l’accessibilité des boutons et des logos au W3C
Images fonctionnelles
Combinaison de liens image et texte adjacents pour la même ressource
Utilisation des attributs alt sur les images utilisées comme boutons d’envoi
Écoutez le podcast Search Off the Record à 15:57 minutes :
Image sélectionnée par Shutterstock/Evgeny Atamanenko