Le nom accessible expliqué : ce que lit un lecteur d’écran

Un bouton qui n’affiche qu’une icône de loupe, sans aucun texte visible : que lit un lecteur d’écran quand le focus s’y arrête ? La réponse dépend d’un mécanisme précis, l’algorithme de calcul du nom accessible, qui détermine quelle source d’information l’emporte quand plusieurs sont présentes en même temps sur un même élément.

Ce que désigne le nom accessible

Le nom accessible d’un élément est la chaîne de texte qu’une technologie d’assistance associe à cet élément pour l’identifier auprès de la personne qui l’utilise. Pour un lien, c’est ce que le lecteur d’écran annonce en plus du rôle « lien » ; pour un bouton, ce qui accompagne l’annonce du rôle « bouton ». Ce nom peut provenir de plusieurs endroits différents, et la spécification Accessible Name and Description Computation, maintenue par le groupe de travail sur l’accessibilité du W3C, fixe l’ordre de priorité entre ces sources.

L’ordre de priorité entre les sources possibles

Sur un même élément, l’algorithme cherche dans cet ordre, et s’arrête à la première source non vide qu’il trouve :

1. aria-labelledby : référence l’identifiant d’un ou plusieurs autres éléments dont le texte sert de nom. Cette source a la priorité la plus haute.
2. aria-label : une chaîne de texte directement fournie en attribut, sans référence à un autre élément du document.
3. Le contenu visible de l’élément lui-même (le texte d’un bouton, le texte alternatif d’une image contenue dans un lien) quand aucune des deux sources précédentes n’est présente.

Exemple concret sur un bouton d’icône de recherche

Prenons un bouton qui n’affiche qu’une icône de loupe en SVG, sans texte visible à côté :

<button>
  <svg aria-hidden="true"><!-- icône loupe --></svg>
</button>

Sans aria-labelledby ni aria-label, et avec l’icône SVG masquée à l’arbre d’accessibilité par aria-hidden="true", ce bouton n’a tout simplement aucun nom accessible. Un lecteur d’écran annonce « bouton », sans aucune précision sur son rôle, ce qui laisse la personne deviner sa fonction ou l’ignorer.

Ajouter aria-label corrige immédiatement le problème :

<button aria-label="Rechercher sur le site">
  <svg aria-hidden="true"><!-- icône loupe --></svg>
</button>

Le lecteur d’écran annonce désormais « Rechercher sur le site, bouton », ce qui donne enfin une information exploitable.

Le cas où aria-labelledby l’emporte sur aria-label

Si le même bouton porte à la fois aria-label et aria-labelledby, c’est aria-labelledby qui détermine le nom final, l’attribut aria-label étant alors totalement ignoré par l’algorithme :

<p id="titre-recherche">Recherche instantanée</p>
<button aria-labelledby="titre-recherche" aria-label="Rechercher sur le site">
  <svg aria-hidden="true"><!-- icône loupe --></svg>
</button>

Dans cet exemple, le nom retenu est « Recherche instantanée », celui du paragraphe référencé par aria-labelledby, et non « Rechercher sur le site » pourtant présent dans aria-label juste à côté. Ce comportement surprend souvent les développeurs qui pensent pouvoir cumuler les deux sources.

Les pièges les plus fréquents

• Ajouter aria-label sur un élément qui a déjà un texte visible parfaitement clair : cela remplace ce texte visible par la valeur de l’attribut, ce qui peut créer une incohérence si les deux ne disent pas exactement la même chose.
• Référencer, via aria-labelledby, un identifiant qui n’existe pas dans le document : l’algorithme retombe alors sur les sources suivantes sans avertissement visible.
• Masquer par erreur, avec aria-hidden="true", le seul élément qui portait le texte destiné à servir de nom via aria-labelledby.

Sur les composants que j’audite, la confusion entre aria-label et aria-labelledby revient très souvent : les deux attributs semblent interchangeables au premier regard, alors que leur ordre de priorité change concrètement ce qu’annonce le lecteur d’écran.

En résumé

Le nom accessible d’un élément se calcule selon un ordre de priorité fixe entre plusieurs sources possibles : aria-labelledby d’abord, aria-label ensuite, le contenu visible en dernier recours. Un bouton d’icône sans aucune de ces trois sources correctement renseignée reste, pour une technologie d’assistance, un bouton sans nom du tout.