Aria-label

L'aria-label est un attribut HTML qui définit un nom accessible pour un élément de l'interface, destiné aux technologies d'assistance comme les lecteurs d'écran. Il remplace ou complète le texte visible quand celui-ci est absent ou insuffisant pour comprendre la fonction de l'élément. C'est l'un des outils de base des spécifications WAI-ARIA (Accessible Rich Internet Applications), publiées par le W3C.

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

Il s'agit d'un attribut que l'on ajoute directement dans le code HTML d'un élément interactif, comme un bouton, un lien ou un champ de formulaire. Sa valeur est une chaîne de texte qui décrit la fonction ou le contenu de l'élément, sans jamais s'afficher à l'écran. Seules les technologies d'assistance la restituent, par exemple un lecteur d'écran qui annonce vocalement ce libellé à une personne malvoyante.

Comment fonctionne l'attribut aria-label ?

Le navigateur construit pour chaque élément un nom accessible à partir de plusieurs sources possibles : le contenu textuel visible, un attribut alt, un aria-labelledby ou un aria-label. Quand un aria-label est présent, il prend généralement la priorité sur le texte visible pour déterminer ce nom accessible. Un bouton qui ne contient qu'une icône de croix peut ainsi recevoir aria-label="Fermer la fenêtre" pour que son rôle soit compréhensible vocalement.

Quelle différence avec aria-labelledby et le texte alt ?

L'aria-label écrit directement le texte accessible dans l'attribut, alors que l'aria-labelledby renvoie vers l'identifiant d'un autre élément du DOM déjà visible à l'écran, ce qui est préférable quand ce texte existe déjà. L'attribut alt, lui, s'applique uniquement aux images et décrit leur contenu visuel. Le choix entre ces trois options dépend du contexte : l'aria-label convient surtout quand aucun texte visible pertinent n'existe dans la page.

Quelles sont les bonnes pratiques d'utilisation ?

• Réserver l'aria-label aux éléments interactifs qui manquent réellement de libellé visible, comme les boutons icônes.
• Éviter de l'utiliser pour dupliquer un texte déjà visible, ce qui peut créer des incohérences avec la traduction automatique ou la reconnaissance vocale.
• Rédiger un texte court, précis et contextuel plutôt qu'une description générique.
• Ne jamais s'en servir comme substitut à une structure HTML sémantique correcte.

L'aria-label est un des nombreux leviers de l'accessibilité web, un sujet que Mazette.co intègre dans ses projets de webdesign et de product design.