L'attribut aria-label et le SEO

J'ai rédigé ce dossier pour répondre à la question d'un utilisateur de mes outils MyRankingMetrics. Lisez bien jusqu'au bout...

Qu'est-ce que l'attribut aria-label ?

L'attribut aria-label est une propriété utilisée dans le cadre de l'accessibilité web, spécifiquement avec les technologies d'assistance comme les lecteurs d'écran. Il fait partie des attributs ARIA (Accessible Rich Internet Applications) qui visent à améliorer l'accessibilité des applications web pour les personnes handicapées.

Lorsqu'il est utilisé dans une balise <a href>, l'attribut aria-label permet de fournir une description textuelle du lien, elle peut être lue par les lecteurs d'écran. C'est utile lorsque le texte du lien lui-même n'est pas suffisamment descriptif ou lorsqu'une icône est utilisée à la place du texte.

Par exemple, si vous avez un lien avec une icône de téléchargement, vous pouvez utiliser l'attribut aria-label pour décrire le lien comme suit :

<a href="document.pdf" aria-label="Télécharger"><img src="download.png" alt=""></a>

Dans cet exemple, le lecteur d'écran lira "Télécharger le document" pour ce lien, ce qui fournit un contexte clair pour les utilisateurs qui ne peuvent pas voir l'icône.

Les conseils officiels pour bien utiliser aria-label

Voici ce que j'ai retenu de la documentation gérée par Mozilla :

• aria-label fournit un nom accessible lorsqu'il n'existe pas d'étiquette visible dans le DOM
• N'abusez pas de aria-label. Rappelez-vous qu'il est principalement destiné aux technologies d'assistance.
• Si vous attribuez un titre à une iframe, ou un attribut alt pour une image ou un <label> pour un champ <input>, alors l'attribut aria-label n'est pas nécessaire. Toutefois, si un attribut aria-label est présent, il aura la priorité sur le titre de l'iframe, l'attribut alt de l'image ou le texte de l'étiquette du champ de formulaire en tant que nom accessible pour cet élément.

Est-ce qu'on peut l'utiliser pour faire un lien sans aucun texte cliquable, ni image ?

Oui, il est possible d'utiliser l'attribut aria-label pour créer un lien sans texte cliquable ni image, bien que cela ne soit généralement pas recommandé pour des raisons d'accessibilité et d'utilisabilité.

Si vous devez créer un lien sans texte visible, vous pouvez utiliser l'attribut aria-label pour fournir une description textuelle du lien qui peut être lue par les lecteurs d'écran. Par exemple :

<a href="page2.html" aria-label="Aller à la page 2"></a>

Dans cet exemple, le lien n'a pas de texte visible, mais l'attribut aria-label fournit une description textuelle qui peut être lue par les lecteurs d'écran.

Est-ce une bonne pratique ? Sans doute pas ! Des liens sans texte visible peuvent être difficiles à utiliser pour les utilisateurs qui ne peuvent pas utiliser de souris ou qui ont des difficultés à cliquer sur des cibles petites ou mal définies.

Il est donc généralement recommandé d'inclure du texte ou une icône cliquable dans vos liens pour améliorer l'accessibilité et l'utilisabilité de votre site web.

Est-ce que Google tient compte du libellé de l'attribut aria-label d'une balise ?

Je n'ai pas trouvé de déclaration officielle de la part de Google à ce sujet, mais d'après mon expérience Google ne tient pas compte de l'attribut aria-label.

Mon test a été le suivant :

• une page A fait un lien vers une page B
• ce lien n'a pas de texte cliquable (et pas d'image), il a simplement un attribut aria-label
• la page B a été mise en ligne sans aucun autre lien que celui-là, et sans être dans un sitemap
• quelques minutes après avoir forcé la réindexation de la page A, Google a indexé la page B
• la page B sort sur des requêtes portant sur son contenu, mais jamais sur le texte du aria-label du lien vers elle

Ceci répond donc à la question qu'un utilisateur de RM Tech m'a posée.

Et cela explique pourquoi dans mon crawler SEO, un lien sans texte cliquable (ni image) est considéré vide, y compris s'il contient un attribut aria-label.

Pour faire un bon maillage interne, il ne faut aucun lien vide comme ça. Vérifiez-le sur votre site...