aria-label en HTML : quand l'utiliser, quand l'éviter

Ce que fait l'attribut aria-label en HTML

Selon MDN, aria-label définit une chaîne de caractères qui peut servir à nommer un élément, à condition que son rôle n'interdise pas de le nommer. La valeur est un simple texte, qui devient le nom accessible de l'objet.

La plupart des contenus reçoivent déjà un nom accessible sans ARIA. Par défaut, le nom d'un bouton est le contenu placé entre les balises <button> et </button>, celui d'une image est la valeur de son attribut alt, et celui d'un champ de formulaire est le texte de l'élément <label> associé. aria-label ne devrait servir que lorsque aucune de ces options n'est disponible ou que le nom par défaut ne convient pas.

Point important : le contenu d'aria-label n'est pas affiché en dehors des technologies d'assistance. MDN recommande donc de rendre visibles pour tous les informations importantes.

• aria-label fonctionne sur les éléments HTML sémantiques ordinaires : il n'est pas réservé aux éléments qui portent un rôle ARIA.
• En JavaScript, la propriété Element.ariaLabel reflète la valeur de l'attribut (la propriété ElementInternals.ariaLabel aussi).
• aria-label et aria-labelledby ont le même objectif : fournir un nom accessible.

Quand utiliser aria-label : bouton icône et repères

Le cas d'école est le bouton qui ne contient qu'une icône. Sans texte, il n'a pas de nom accessible : un utilisateur de lecteur d'écran ne peut pas savoir à quoi il sert. Dans l'exemple de MDN ci-dessous, le bouton contient seulement une icône SVG, et aria-label="Close" (« Fermer ») indique sa fonction ; nous l'avons adapté en français. Le SVG porte aria-hidden="true" et focusable="false".

MDN précise qu'aria-label peut s'appliquer à tout élément susceptible d'avoir un nom accessible, mais qu'en pratique il n'est pris en charge que sur les éléments interactifs, les widgets, les repères (landmarks), les images et les iframes. L'attribut est prévu notamment pour les liens, les vidéos, les champs de formulaire et les éléments ayant un rôle de repère ou de widget, lorsque aucun libellé visible n'existe dans le DOM.

Pour les repères, aria-label permet de nommer un élément ayant un rôle de repère (landmark) lorsqu'aucun libellé visible n'existe dans le DOM. Si un texte visible qui le nomme existe, référencez-le plutôt avec aria-labelledby, comme expliqué plus bas.

<!-- Bouton icône (adapté de l'exemple MDN) -->
<button aria-label="Fermer">
  <svg aria-hidden="true" focusable="false" width="17" height="17"
       xmlns="http://www.w3.org/2000/svg">
    <path d="…" fill="black" />
  </svg>
</button>

Quand ne pas utiliser aria-label

Premier cas : l'élément a déjà un texte visible qui le nomme. MDN est explicite : si un texte visible sert de libellé à l'élément, utilisez aria-labelledby. aria-label est réservé aux situations où le texte qui pourrait nommer l'élément n'est pas visible.

Deuxième cas : le nom est déjà fourni par le HTML. Si vous avez donné un title à une <iframe>, un attribut alt à une <img> ou un <label> à un <input>, aria-label n'est pas nécessaire. Et s'il est quand même présent, il prend le pas sur le title de l'iframe, l'alt de l'image ou le texte du <label> comme nom accessible. Un aria-label superflu prend donc le pas sur le libellé natif.

Troisième cas : certains rôles structurels qui ne peuvent pas recevoir de nom. Ni aria-label ni aria-labelledby ne doivent être utilisés avec des rôles structurels en ligne comme code, term ou emphasis, ni avec les rôles non exposés à l'API d'accessibilité, dont none. MDN liste les rôles où aria-label n'est pas pris en charge :

• caption, code, definition, deletion, emphasis
• generic, insertion, mark, paragraph
• presentation / none, strong, subscript, superscript
• suggestion, term, time

<!-- À éviter : le label existe déjà, aria-label l'écrase -->
<label for="email-1">Adresse e-mail</label>
<input id="email-1" type="email" aria-label="Champ">

<!-- Correct : le <label> suffit -->
<label for="email-2">Adresse e-mail</label>
<input id="email-2" type="email">

aria-label ou aria-labelledby : lequel choisir ?

Les deux attributs fournissent un nom accessible. La différence tient à la source du texte : aria-labelledby fait référence à un texte déjà présent dans le DOM, aria-label contient le texte lui-même. MDN recommande fortement de privilégier aria-labelledby lorsqu'un libellé visible existe et qu'il est possible de le référencer pour une expérience utilisateur acceptable. S'il n'y a aucun nom visible à référencer, utilisez aria-label.

N'utilisez jamais les deux sur le même élément : aria-labelledby l'emporte sur aria-label lorsque les deux sont présents.

Enfin, aria-label n'est pas fait pour donner des instructions. Pour ajouter une consigne ou clarifier l'interface, MDN conseille un texte visible associé via aria-describedby ou aria-description. Les instructions doivent être accessibles à tous les utilisateurs, pas seulement à ceux qui utilisent un lecteur d'écran, et le mieux reste une interface plus intuitive.

La première règle d'ARIA : le HTML natif d'abord

Le document « Using ARIA » du W3C formule la première règle d'usage d'ARIA ainsi : si vous pouvez utiliser un élément ou un attribut HTML natif qui intègre déjà la sémantique et le comportement dont vous avez besoin, faites-le, plutôt que de détourner un élément en lui ajoutant un rôle, un état ou une propriété ARIA pour le rendre accessible.

Rapproché d'aria-label, ce principe invite à chercher d'abord la solution native. MDN va dans le même sens : avec un title sur une <iframe>, un alt sur une <img> ou un <label> pour un <input>, aria-label n'est pas nécessaire. aria-label sert quand aucun nom natif n'est disponible, ou que le nom par défaut ne convient pas, et qu'aucun texte visible ne peut être référencé, comme pour le bouton icône vu plus haut.

Le W3C cite trois exceptions à cette première règle : la fonctionnalité existe en HTML mais n'est pas implémentée, des contraintes de design visuel excluent l'élément natif, ou la fonctionnalité n'existe pas encore en HTML. Les autres règles du document rappellent de ne pas modifier la sémantique native sauf nécessité réelle, de rendre tous les contrôles ARIA interactifs utilisables au clavier, et de ne pas placer role="presentation" ou aria-hidden="true" sur un élément focalisable.

À noter : « Using ARIA » est désormais publié comme Discontinued Draft (il n'est plus destiné à évoluer ni à être maintenu). Le W3C renvoie vers l'ARIA Authoring Practices Guide (APG) pour plus de conseils sur l'usage d'ARIA dans les composants et motifs d'interface.

Vérifier vos aria-label en pratique

Pour auditer un site, passez en revue chaque élément qui porte aria-label et posez-vous ces questions, tirées des recommandations ci-dessus.

• L'élément a-t-il déjà un nom natif (alt, <label>, title d'iframe) ? Si oui, aria-label n'est pas nécessaire et prendrait le pas sur lui.
• Existe-t-il un texte visible qui nomme l'élément ? Si oui, préférez aria-labelledby.
• Le rôle de l'élément accepte-t-il un nom (pas paragraph, generic, code, strong, etc.) ?
• aria-label et aria-labelledby sont-ils présents en même temps ? Gardez-en un seul.
• Le texte d'aria-label contient-il une instruction ? Déplacez-la dans un texte visible relié par aria-describedby.
• Un bouton ou un lien icône est-il resté sans nom ? Si aucun texte visible du DOM ne peut le nommer, ajoutez-lui un aria-label ; sinon, utilisez aria-labelledby.

Questions fréquentes

À lire aussi sur Conformly

• Corriger un bouton sans intitulé accessible en HTML
• Corriger un lien sans intitulé en HTML
• Critère RGAA 7.1 sur les scripts et aides techniques
• Tous les guides de correction RGAA par framework

Sources

Article appuyé sur les sources officielles citées en fin de page.

• MDN — aria-label
• W3C — Using ARIA