Aria-label vs aria-labelledby : choisir le bon attribut selon le contexte

Vous avez un bouton icône sans texte visible. Faut-il utiliser aria-label ou aria-labelledby ? Ces deux attributs semblent faire la même chose, mais leurs différences ont des impacts concrets sur l'accessibilité et la maintenance. Voici comment choisir.

Rappel : le nom accessible

Chaque élément interactif (bouton, lien, champ) doit avoir un nom accessible : le texte annoncé par les lecteurs d'écran. Le navigateur calcule ce nom selon un ordre de priorité strict :

1. aria-labelledby (priorité maximale)
2. aria-label
3. Contenu textuel de l'élément
4. Attribut title (dernier recours)

[!NOTE] Si aria-labelledby est présent et validé, il écrase tout le reste, y compris aria-label et le texte visible.

aria-label : définir un label inline

aria-label définit le nom accessible directement dans l'attribut :

<button aria-label="Fermer la fenêtre de dialogue">
  <svg aria-hidden="true"><!-- icône X --></svg>
</button>

Quand l'utiliser

• Boutons ou liens avec icône seule (pas de texte visible)
• Champs de formulaire avec placeholder mais sans label visible
• Éléments dont le contexte visuel est évident mais pas programmatique

Limitations

• Non traduit automatiquement par les outils de traduction
• Duplique l'information si du texte visible existe déjà
• Maintenance : le texte est dispersé dans les attributs

aria-labelledby : référencer du texte existant

aria-labelledby pointe vers l'ID d'un élément dont le contenu devient le nom accessible :

<h2 id="contact-title">Nous contacter</h2>
<form aria-labelledby="contact-title">
  <!-- Le formulaire est nommé "Nous contacter" -->
</form>

Combiner plusieurs sources

L'attribut accepte plusieurs IDs séparés par des espaces :

<span id="action">Supprimer</span>
<span id="target">l'article "Accessibilité web"</span>

<button aria-labelledby="action target">
  <svg aria-hidden="true"><!-- icône poubelle --></svg>
</button>
<!-- Annonce : "Supprimer l'article Accessibilité web" -->

Quand l'utiliser

• Un texte visible peut déjà servir de label (heading, paragraphe)
• Vous voulez composer un label à partir de plusieurs éléments
• Le site est multilingue et utilise la traduction automatique

Tableau de décision

Impact sur la traduction

C'est la différence la plus sous-estimée :

<!-- Ce texte ne sera PAS traduit automatiquement -->
<button aria-label="Search">🔍</button>

<!-- Ce texte sera traduit avec le reste de la page -->
<span id="search-label" class="visually-hidden">Rechercher</span>
<button aria-labelledby="search-label">🔍</button>

Si votre site utilise Google Translate, DeepL ou des services similaires, aria-label restera en langue d'origine.

[!TIP] Pour les sites internationaux avec traduction gérée par CMS, aria-label peut être acceptable si les traducteurs ont accès aux attributs HTML.

Cas pratiques

1. Menu de navigation

<!-- Bon : le texte visible sert de label -->
<nav aria-labelledby="nav-title">
  <h2 id="nav-title" class="visually-hidden">Menu principal</h2>
  <ul>...</ul>
</nav>

<!-- Acceptable si pas de heading -->
<nav aria-label="Menu principal">
  <ul>...</ul>
</nav>

2. Modale de confirmation

<div role="dialog" aria-labelledby="modal-title" aria-describedby="modal-desc">
  <h2 id="modal-title">Confirmer la suppression</h2>
  <p id="modal-desc">Cette action est irréversible.</p>
  <!-- ... -->
</div>

3. Champ avec instructions

<label id="email-label" for="email">Email</label>
<span id="email-hint">Format : nom@domaine.fr</span>
<input
  type="email"
  id="email"
  aria-labelledby="email-label"
  aria-describedby="email-hint">

Ici, aria-labelledby reprend le label visible, et aria-describedby ajoute l'instruction.

Erreurs fréquentes

1. aria-label quand du texte existe

<!-- Redondant : le texte suffit -->
<button aria-label="Envoyer le formulaire">Envoyer</button>

<!-- Simple et efficace -->
<button>Envoyer le formulaire</button>

2. aria-labelledby vers un ID inexistant

<!-- L'élément #title n'existe pas : pas de nom accessible -->
<nav aria-labelledby="title">...</nav>

Vérifiez toujours que l'ID référencé existe dans le DOM.

3. Confondre labelledby et describedby

• labelledby : fournit le nom (ce que c'est)
• describedby : fournit la description (informations supplémentaires)

<!-- Le champ s'appelle "Mot de passe", décrit par les règles -->
<label id="pw-label" for="password">Mot de passe</label>
<input type="password" id="password"
       aria-labelledby="pw-label"
       aria-describedby="pw-rules">
<p id="pw-rules">8 caractères minimum, 1 majuscule</p>

Différence avec notre précédent article

Notre guide aria-label et aria-labelledby couvre les bases et la syntaxe. Cet article se concentre sur le choix contextuel entre les deux attributs, avec une attention particulière à la traduction et à la maintenance.

Checklist de décision

Avant de choisir, posez-vous ces questions :

1. Y a-t-il du texte visible utilisable ? → aria-labelledby
2. Le site sera-t-il traduit automatiquement ? → Préférez aria-labelledby
3. Le label doit-il combiner plusieurs éléments ? → aria-labelledby
4. C'est un élément isolé sans contexte textuel ? → aria-label

Critères RGAA concernés

Conclusion

aria-label et aria-labelledby répondent au même besoin mais dans des contextes différents. La règle d'or : si un texte visible peut servir de label, utilisez aria-labelledby. Réservez aria-label aux situations où aucun texte existant ne convient.

Analysez l'usage de vos attributs ARIA avec RGAA Checker : notre outil vérifie la présence et la cohérence des noms accessibles sur tous vos éléments interactifs.