Certains empruntent mentalement le raccourci : l’attribut aria-label = accessibilité des contenus pour les utilisateurs handicapés. En réalité, ce prisme est réducteur, et l’attribut aria-label va plus loin car bien employé, il solidifie votre position SEO.
Définition de l’attribut aria-label
L’attribut aria-label appartient à l’ensemble des attributs dits ARIA (Accessible Rich Internet Applications) dont l’objectif consiste à faciliter l’accès des personnes handicapées aux applications web. Il fournit une description écrite d’un lien, qui est lisible par les lecteurs d’écran.
Généralement, l’attribut aria-label est indiqué lorsqu’à la place du texte attendu, on trouve une icône, ou que le texte n’est pas lisible.
Les règles officielles d’utilisation de l’attribut aria-label
1️⃣ La première règle : Lorsque le DOM ne fournit pas d’étiquette visible, l’attribut aria-label permet d’afficher un nom accessible.
2️⃣ La deuxième règle : L’attribut aria-label doit être utilisé avec modération. Il assiste en cas de défaillance des technologies standard.
3️⃣ La troisième règle : L’attribut aria-label n’est pas indispensable dans trois situations. Notamment en présence d’un titre pour une iframe, d’un attribut Alt pour une image, ou encore d’un <label> pour un champ <input>. Cependant, si vous l’ajoutez quand même, l’attribut aria-label devient prioritaire d’office.
Ces bonnes pratiques sont fournies par Mozilla. En général, vous pouvez utiliser l’attribut aria-label pour les entrées sans étiquette, les points de repérage pour une navigation à multiples entrées ou vos icônes.
Google n’a rien spécifié, et il y a une bonne raison pour.
Google n’a fait aucune déclaration officielle pour la prise en charge de l’attribut aria-label
En l’absence de déclaration officielle de Google pour l’attribut aria-label, Olivier Duffez de WebRankInfo a procédé à un test en situation réelle.
Il a créé un lien d’une page test (A) à l’autre (B) sans image ni texte cliquable, mais avec un attribut aria-label. La page (B) a été mise en ligne avec ce lien de test, uniquement. Elle n’a pas été non plus ajoutée dans un Sitemap.
📊 Résultat : La page n’est jamais apparue dans les SERP pour le texte de l’attribut aria-label. Par contre, elle est apparue pour des requêtes sur son contenu.
Olivier Duffez en a tiré 3 hypothèses. En premier lieu, Google suit les liens mêmes vides, sans image ni texte cliquable, l’attribut aria-label inclus. En second lieu, Google ignore le contenu de l’attribut aria-label.
En troisième lieu, si vous souhaitez optimiser une page avec un lien vide, vous devez associer une image avec attribut Alt ou un texte cliquable. Ces dispositions sont à prendre en plus de l’attribut aria-label.
✅ Bon à savoir : Un lien vide doit être supprimé, renseigné ou remplacé, si vous souhaitez une optimisation SEO de qualité.
Cas particulier : Pas de texte ni d’image
Si malgré tout, vous devez utiliser l’attribut aria-label pour générer un lien sans texte ni image, vous réduirez l’utilisabilité et l’accessibilité de votre site internet.
Voici un exemple d’utilisation de l’attribut aria-label pour créer un lien sans texte visible, avec une description textuelle accessible aux lecteurs d’écran :
<a href=”page2.html” aria-label=”Aller à la page 2″></a>
Les éléments techniques à considérer pour utiliser l’attribut aria-label
Si le texte qui pourrait étiqueter l’élément n’est pas visible, utilisez l’attribut aria-label. Dans le cas contraire, utilisez plutôt aria-labelledby.
Toutefois prudence : Si vous utilisez les deux sur le même élément par inadvertance et que les deux sont appliqués simultanément, aria-labelledby aura d’office la priorité.
Enfin, l’attribut aria-label peut également être utilisé avec des éléments HTML sémantiques réguliers. Il ne se limite pas uniquement aux éléments auxquels un rôle ARIA est attribué.
Les cas où l’attribut aria-label n’est pas pris en charge
Ce sont les cas où l’élément interdit le nommage. Autrement dit, l’auteur ne peut pas ajouter de nom accessible à son élément ce qui empêche l’attribut aria-label de définir une chaîne de valeur. On dénombre notamment :
- superscript
- suggestion
- term
- time
- emphasis
- generic
- insertion
- mark
- code
- caption
- definition
- deletion
- paragraph
- presentation/none
- strong
- subscript
Quels éléments du site peut-on associer stratégiquement avec l’attribut aria-label pour le SEO ?
- Les éléments interactifs : a(lorsqu’il y a l’attribut href), audio et vidéo (lorsqu’il y a l’attribut controls), input, textarea, select, button.
- Les éléments de repère implicites : header, main, footer, nav, section, aside, et form.
- Les éléments de repère explicites : tels qu’un élément avec role=”navigation”.
- Les éléments de rôle de widget : tels qu’un élément avec role=”dialog”ou role=”tooltip”(dans ARIA 1.1, vous trouverez 27 rôles de widget).
- Les éléments img et iframe.
L’essentiel lorsque vous utilisez l’attribut aria-label
Évitez la redondance. Si l’élément à décrire contient un contenu textuel, évitez de le surcharger avec l’attribut aria-label.
Auditez les éléments de votre site internet dès maintenant pour évaluer les possibilités d’insertion de l’attribut aria-label. Et en cas de besoin, faites-vous accompagner par des spécialistes.
