aria-label

Description

aria-label définit une chaîne de texte qui sert de libellé accessible à l’élément. Il est utilisé lorsqu’il n’existe pas de texte visible dans la page pour identifier l’élément (bouton icône, champ sans <label> visible, région de navigation ambiguë…).

Si un libellé visible existe déjà dans le DOM, préférer aria-labelledby qui y fait référence — le texte visible et le nom accessible seront alors synchronisés.

Syntaxe

<button aria-label="Fermer la fenêtre">×</button>
<input type="search" aria-label="Rechercher dans le catalogue" />
<nav aria-label="Navigation principale">…</nav>

Exemples

Bouton icône sans texte visible :

<button type="button" aria-label="Supprimer l'article">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

Plusieurs régions de navigation distinctes :

<nav aria-label="Navigation principale">…</nav>
<nav aria-label="Navigation du fil d'Ariane">…</nav>
<nav aria-label="Navigation de pagination">…</nav>

Notes

Priorité des noms accessibles : aria-labelledby > aria-label > <label> natif > attribut title. Utiliser aria-label uniquement quand aucune autre méthode n’est disponible.

Langue : le texte de aria-label est dans la langue du contenu. Si la langue diffère de l’élément parent, ajouter lang sur l’élément pour que les lecteurs d’écran utilisent la bonne synthèse vocale.

Pas de HTML dans la valeur : la valeur est du texte brut. Les balises HTML éventuelles seront lues littéralement par les technologies d’assistance.