Propriété Relation

`aria-label`

Fournit un nom accessible sous forme de chaîne de caractères lorsqu'aucun texte visible n'est disponible. À utiliser uniquement en l'absence de libellé à l'écran — si un texte visible existe, préférez aria-labelledby afin que le nom prononcé corresponde à ce que l'utilisateur voit.

Quand l’utiliser

Lorsqu’un contrôle n’a pas de texte visible — boutons avec icône uniquement, champs de recherche avec seulement un glyphe de loupe, boutons de fermeture (×), icônes de liens vers des réseaux sociaux. La chaîne placée dans aria-label devient le nom accessible de l’élément, et les lecteurs d’écran l’annoncent à la place de tout texte interne.

L’équivalent HTML natif est l’élément <label> pour les champs de formulaire, ou le texte visible d’un bouton. N’utilisez aria-label que lorsque aucune de ces options n’est possible.

Comportement

Prend une chaîne de caractères unique. Tout ce que vous placez dans aria-label remplace tout texte visible à l’intérieur de l’élément — le nom accessible est ce que les utilisateurs de technologie d’assistance entendent, mais il est invisible pour les utilisateurs voyants. Cette asymétrie est la source de la plupart des problèmes liés à cet attribut.

La chaîne n’est pas traduite automatiquement. Si votre site prend en charge plusieurs langues, la valeur de aria-label doit être localisée comme toute autre chaîne d’interface. Les lecteurs d’écran traitent également la valeur comme du texte brut — pas de HTML, pas de sauts de ligne, pas de balisage.

Si l’élément possède un texte visible, préférez aria-labelledby pointant vers ce texte, afin que le libellé visible et le nom accessible restent synchronisés.

Erreurs fréquentes

Mettre aria-label="Cliquer ici" sur un bouton qui indique déjà « Valider la commande » — le texte visible est désormais masqué pour la technologie d’assistance, et l’utilisateur entend quelque chose d’incorrect.
Violer le critère de succès WCAG 2.5.3 Étiquette dans le nom : aria-label="Valider" sur un bouton dont le texte visible indique « Envoyer la commande » signifie qu’un utilisateur de commande vocale ne peut pas dire « cliquer sur Envoyer la commande » pour l’activer.
Ajouter aria-label à un élément non interactif comme un <div> ou un <span> — la plupart des navigateurs l’ignorent car l’élément n’a pas de rôle qui prend en charge un nom.
Laisser la valeur non traduite alors que le reste de la page est dans une autre langue.
Utiliser aria-label à la place d’un vrai <label> sur un champ de formulaire, ce qui supprime la possibilité de cliquer sur le libellé pour placer le focus dans le champ.
Insérer des instructions dans aria-label au lieu de aria-describedby. Le nom doit être court ; le texte d’aide va dans la description.

Exemple

<!-- Bouton avec icône uniquement : pas de texte visible, aria-label est obligatoire -->
<button type="button" aria-label="Fermer la boîte de dialogue">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

<!-- Texte visible + icône : N'utilisez PAS aria-label ici -->
<button type="button">
  <svg aria-hidden="true" focusable="false">…</svg>
  Fermer la boîte de dialogue
</button>