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

> aria-label, aria-labelledby, contenu visible : plusieurs sources peuvent fournir le nom d'un élément. Comprendre l'algorithme qui détermine laquelle l'emporte, avec un bouton d'icône en exemple.

- Auteur : WordPress Développement
- Publié le : 2022-03-17
- Mis à jour le : 2022-03-17
- Catégorie : Accessibilité
- URL : https://www.wpmoderne.fr/accessibilite/nom-accessible-lecteur-ecran-explique/

## L’essentiel

- Plusieurs sources peuvent définir un nom, une seule est retenue à la fois
- aria-labelledby prime sur aria-label, qui prime sur le contenu visible
- Un bouton d'icône sans aucune de ces sources n'a tout simplement pas de nom

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.

> L'essentiel à retenir : Plusieurs sources peuvent définir un nom, une seule est retenue à la fois ; aria-labelledby prime sur aria-label, qui prime sur le contenu visible ; Un bouton d'icône sans aucune de ces sources n'a tout simplement pas de nom

## 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.