7 mauvaises façons d’utiliser l’attribut aria-label, la troisième va vous surprendre !

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

L’attribut aria-label contient une chaîne de caractères pour fournir un nom accessible à un élément interactif.

En effet, il arrive qu’un élément n’ait pas de nom accessible dans le code de la page : c’est notamment le cas d’un bouton contenant uniquement une icône. L’attribut aria-label peut être alors utilisé pour permettre la restitution d’un nom pour ce bouton par les technologies d’assistance, comme les lecteurs d’écran.

Voici un exemple d’utilisation pour un bouton sans intitulé textuel :

<button aria-label="Fermer" onclick="myDialog.close()">
  <svg aria-hidden="true" focusable="false" width="17" height="17" xmlns="http://www.w3.org/2000/svg">
    <path d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z" fill="#000" />
  </svg>
</button>

Les différents audits de conformité RGAA (Référentiel Général d’Amélioration de l’Accessibilité) que j’ai pu mener tendent à montrer que l’utilisation de cet attribut n’est pas totalement maîtrisée par les équipes de développement.

J’ai compilé ici les erreurs les plus fréquemment rencontrées au cours de mes audits.

1 : L’erreur bête

L’erreur bête, mais pas isolée : la mauvaise écriture du nom de l’attribut. Souvent, il s’agit de l’oubli du tiret entre aria et label. Et là, et bien, ça marche beaucoup moins bien (en fait, pas du tout).

Dans cet exemple, le bouton n’a pas de nom accessible disponible pour les technologies d’assistance à cause de la faute dans l’écriture du nom de l’attribut :

<button arialabel="Fermer" onclick="myDialog.close()"><span class="icon"></span></button>

Pour éviter l’erreur :

• Installer un linter (outil d’analyse de code permettant de détecter les erreurs et problèmes de syntaxe) dans son outil de développement préféré.
• Passer le code des pages au validateur W3C : ce type d’erreurs sera remonté.

2 : L’excès de zèle

Il n’est pas rare non plus de rencontrer des liens <a> flanqués d’un attribut aria-label strictement identique à l’intitulé textuel présent dans l’élément. Ça ne sert à rien et alourdit le code et sa maintenance. Cette erreur n’est pas la plus grave mais révèle une mauvaise compréhension du rôle et de l’utilisation de l’attribut.

À retenir : si le nom de l’élément est déjà présent dans le code de la page, alors utiliser l’attribut aria-label n’est pas une bonne idée.

Exemple de redondance de l’attribut :

<a href="#" aria-label="Accueil">Accueil</a>

3 : Sans sémantique, à quoi bon ?

Il m’arrive souvent de rencontrer des pages constellées d’attributs aria-label sur toutes sortes d’éléments, notamment <div> et <span> sans attribut role, et donc sans sémantique. La sémantique donne le sens à une partie de code. Cette sémantique est implicite sur des éléments natifs tels que <a>, <button>, <table>, <ul> : pas besoin de leur ajouter un attribut role, contrairement aux éléments <div> et <span>.

Sans la présence de cette sémantique, l’attribut aria-label est tout bonnement ignoré par les technologies d’assistance : il n’est pas restitué.

Dans ces deux exemples, les attributs aria-label seront ignorés :

<span aria-label="Accueil" class="icon"></span>

<div class="button" aria-label="Fermer"></div>

4 : Le mieux ennemi du bien

En voulant améliorer l’expérience des utilisateurs de lecteur d’écran, certains développeurs font passer des messages bien intentionnés via l’attribut aria-label d’un bouton ou d’un lien.

Intention louable, mais là où le bât blesse, c’est quand ce bouton ou ce lien contient déjà un contenu textuel.

Et là c’est le drame : ce contenu textuel est tout bonnement ignoré par le lecteur d’écran car l’attribut aria-label écrase cet intitulé.

Autre inconvénient, pour les utilisateurs de logiciel de reconnaissance vocale, il devient impossible de cibler l’élément par son intitulé visible.

Impossible donc d’activer le bouton ci-après en dictant « Fermer ». Il faudrait dicter « Retour au contenu principal », mais ce texte n’est pas visible à l’écran.

<button aria-label="Retour au contenu principal" onclick="myDialog.close()">Fermer</button>

5 : « Ceinture bretelles » raté

Parfois, par souci de trop bien faire, l’objectif n’est pas atteint. L’usage combiné des attributs aria-label et aria-labelledby sur un même élément n’est pas une bonne idée.

L’attribut aria-labelledby a le même objectif que l’attribut aria-label : donner un nom accessible à un élément. Seulement, aria-labelledby a pour valeur l’id (ou une liste d’id) d’un élément sur la page contenant l’intitulé en question.

Mais il faut savoir que dans le calcul du nom accessible d’un élément, l’attribut aria-labelledby prévaut sur tous les autres attributs et même sur le contenu de l’élément.

Pour faire simple, si sur un élément sont présents aria-label, aria-labelledby et contenu textuel, seul le contenu référencé par aria-labelledby est restitué par les technologies d’assistance.

Cela signifie que le nom restitué pour le bouton suivant est « Bretelle » :

<span class="sr-only" id="idBretelle">Bretelle</span>
<button aria-label="Ceinture" aria-labelledby="idBretelle" onclick="myDialog.close()">Fermer</button>

6 : Mauvais jugement de valeur

Comme l’attribut aria-labelledby vient d’être évoqué, voici une autre confusion rencontrée dans le code : donner un id comme valeur à l’attribut aria-label.

Sans surprise, c’est bien l’id lui-même qui sera restitué par les technologies d’assistance.

Dans cet exemple, le nom accessible restitué est « idBouton » :

<span class="sr-only" id="idBouton">Fermer</span>
<button aria-label="idBouton" onclick="myDialog.close()"><span class="icon"></span></button>

7 : Avec la (bonne) langue, c’est mieux

Les attributs aria-label ne sont pas visibles sur la page. Ils peuvent, à ce titre, être des contenus oubliés et notamment dans la phase d’internationalisation. Souvent (très), je retrouve des aria-label en anglais sur une page dont la langue par défaut est le français. Too bad ! (dommage).

Autre côté désavantageux de l’attribut aria-label, c’est qu’il passe à la trappe lors d’une traduction automatique de la page : détail à ne pas négliger !

Exemple de code (trop) souvent rencontré sur une page en français :

<button aria-label="Close" onclick="myDialog.close()"><span class="icon"></span></button>

Conclusion : comment bien utiliser aria-label ?

La meilleure façon d’utiliser aria-label c’est surtout de ne pas l’utiliser, comme l’indique la première règle ARIA (Accessible Rich Internet Applications) (en anglais).

Pour donner un nom accessible à un élément, il faut privilégier cet ordre de priorité :

1. Utiliser la méthode HTML native : un élément <label> avec attribut for pour étiqueter un champ <input>, du contenu textuel dans un élément <button>, l’attribut alt pour une image <img> etc.
2. Utiliser l’attribut aria-labelledby pointant vers l’id d’un texte visible existant : la relation visuelle est ainsi transmise dans le code.
3. Utiliser du texte en masquage accessible toujours présent sur la page : cette méthode contribue à l’amélioration progressive, par exemple dans le cas d’icônes informatives insérées en CSS.
4. Utiliser l’attribut aria-label seulement si toutes les options précédentes sont impossibles et garder en tête que pour ce nom accessible : pas de traduction automatique, pas de possibilité de déclaration de changement de langue, pas d’utilisation possible à la reconnaissance vocale, pas de copie possible du texte, et il n’apparaîtra pas sans les feuilles de styles CSS.

D’après le rapport de The WebAIM Million (en anglais) , 74.6 % des pages d’accueil testées utilisent ARIA. Les pages avec ARIA comportent en moyenne 34.2 % d’erreurs d’accessibilité en plus que celles sans ARIA.
WebAIM (Web Accessibility in Mind) est une organisation à but non lucratif, fournisseuse de solutions en matière d’accessibilité du web depuis 1999.

Raison de plus pour utiliser avec précaution cet attribut aria-label !

Ressources

• L’attribut aria-label sur MDN
• Les règles d’utilisation des attributs ARIA (en anglais)
• La différence entre aria-label et aria-labelledby (en anglais)
• Les méthodes pour donner un nom à un élément interactif par Adrian Roselli (en anglais)
• aria-label n’est pas traduit par Adrian Roselli (en anglais).
• Le rapport de The WebAIM Million (en anglais)