Maîtriser aria-label : quand, comment et pourquoi l'utiliser
En Bref : L'essentiel à retenir
- aria-label fournit un nom accessible invisible quand aucun texte visible ne peut nommer l'élément.
- La première règle ARIA est de ne pas utiliser ARIA si une solution HTML native existe.
- aria-label ne fonctionne que sur les éléments interactifs et les landmarks, pas sur les div ou span génériques.
- aria-labelledby est préférable quand le texte existe déjà dans la page car il maintient une seule source de vérité.
L'attribut aria-label est l'un des outils ARIA les plus utilisés, mais aussi l'un des plus mal compris. Cet article explore en profondeur quand utiliser aria-label, quand l'éviter, et comment garantir des noms accessibles de qualité pour vos interfaces.
Qu'est-ce que aria-label ?
aria-label est un attribut ARIA qui définit une chaîne de texte servant de nom accessible à un élément. Ce texte est lu par les lecteurs d'écran mais n'apparaît pas visuellement à l'écran.
<button aria-label="Fermer le menu">
<svg aria-hidden="true"><!-- icône X --></svg>
</button>
Un lecteur d'écran annoncera : "Fermer le menu, bouton"
La première règle ARIA
Avant d'utiliser aria-label, rappelez-vous la première règle d'ARIA :
"Si vous pouvez utiliser un élément HTML natif ou un attribut avec la sémantique et le comportement requis, faites-le au lieu d'ajouter un rôle ARIA."
Concrètement, cela signifie :
<!-- Préféré : texte visible -->
<button>
<svg aria-hidden="true"><!-- icône --></svg>
Fermer le menu
</button>
<!-- Acceptable : aria-label quand le texte visible est impossible -->
<button aria-label="Fermer le menu">
<svg aria-hidden="true"><!-- icône --></svg>
</button>
Le texte visible est toujours préférable car il bénéficie à tous les utilisateurs, pas seulement ceux qui utilisent des technologies d'assistance.
Sur quels éléments aria-label fonctionne
Éléments interactifs
aria-label fonctionne sur les éléments avec lesquels l'utilisateur peut interagir :
<button>et<input type="button"><a href="...">(liens avec href)<input>,<select>,<textarea>- Éléments avec rôles interactifs (
role="button",role="link")
<button aria-label="Supprimer l'article du panier">
<svg aria-hidden="true"><!-- corbeille --></svg>
</button>
<a href="/aide" aria-label="Obtenir de l'aide sur cette fonctionnalité">
<svg aria-hidden="true"><!-- point d'interrogation --></svg>
</a>
Landmarks et régions
Les landmarks bénéficient de aria-label pour les distinguer :
<nav aria-label="Navigation principale">...</nav>
<nav aria-label="Navigation du pied de page">...</nav>
<aside aria-label="Articles similaires">...</aside>
<aside aria-label="Publicité">...</aside>
Widgets ARIA
Les composants interactifs complexes :
<div role="dialog" aria-label="Confirmation de commande">...</div>
<div role="tablist" aria-label="Options de livraison">...</div>
Où aria-label NE fonctionne PAS
aria-label est ignoré sur les éléments non interactifs sans rôle :
<!-- Ces aria-label seront ignorés par la plupart des lecteurs d'écran -->
<div aria-label="Section importante">...</div>
<span aria-label="Note">...</span>
<p aria-label="Description">...</p>
Pour ces éléments, utilisez du texte visible ou masqué visuellement (.sr-only).
[!NOTE] C'est une erreur fréquente : ajouter aria-label sur un div en espérant qu'il sera lu. Sans rôle interactif ou landmark, l'attribut est simplement ignoré.
Cas d'usage légitimes
1. Boutons avec icônes seules
<button aria-label="Rechercher sur le site">
<svg aria-hidden="true"><!-- loupe --></svg>
</button>
<button aria-label="Ajouter au panier">
<svg aria-hidden="true"><!-- panier + --></svg>
</button>
2. Liens "En savoir plus" répétés
Quand plusieurs liens identiques mènent à des destinations différentes :
<article>
<h2>Article sur l'accessibilité</h2>
<p>Lorem ipsum...</p>
<a href="/accessibilité" aria-label="En savoir plus sur l'accessibilité">
En savoir plus
</a>
</article>
<article>
<h2>Guide du RGAA</h2>
<p>Lorem ipsum...</p>
<a href="/guide" aria-label="En savoir plus sur le guide RGAA">
En savoir plus
</a>
</article>
3. Distinguer plusieurs navigations
<header>
<nav aria-label="Navigation principale">
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/produits">Produits</a></li>
</ul>
</nav>
</header>
<footer>
<nav aria-label="Liens utiles">
<ul>
<li><a href="/mentions-légales">Mentions légales</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</footer>
4. Formulaires avec labels visuels impossibles
<!-- Recherche sans label visible (design compact) -->
<form role="search">
<input
type="search"
aria-label="Rechercher sur le site"
placeholder="Rechercher..."
>
<button aria-label="Lancer la recherche">
<svg aria-hidden="true"><!-- loupe --></svg>
</button>
</form>
[!TIP] Même sans label visible, le placeholder ne suffit pas : il disparaît à la saisie.
aria-labelcomplète l'accessibilité.
Quand préférer aria-labelledby
Si le texte qui doit nommer votre élément existe déjà dans la page, utilisez aria-labelledby :
<h2 id="titre-section">Nos services</h2>
<nav aria-labelledby="titre-section">
<!-- Navigation nommée par le titre existant -->
</nav>
Avantages de aria-labelledby :
- Une seule source de vérité : si le titre change, le nom accessible change aussi
- Pas de duplication : évite de maintenir le même texte à deux endroits
- Peut combiner plusieurs sources :
aria-labelledby="id1 id2"
<span id="action">Supprimer</span>
<span id="objet">l'article "Chaise"</span>
<button aria-labelledby="action objet">
<svg aria-hidden="true"><!-- corbeille --></svg>
</button>
<!-- Annonce : "Supprimer l'article Chaise, bouton" -->
Consultez notre guide détaillé aria-label vs aria-labelledby pour approfondir.
Erreurs courantes avec aria-label
1. Utiliser aria-label quand le texte visible suffit
<!-- Inutile et potentiellement confus -->
<button aria-label="Envoyer le formulaire">Envoyer</button>
<!-- Le texte visible suffit -->
<button>Envoyer</button>
2. aria-label qui contredit le texte visible
<!-- Confus : le visuel dit "Modifier", le lecteur dit "Supprimer" -->
<button aria-label="Supprimer">Modifier</button>
WCAG 2.5.3 exige que le nom accessible contienne le texte visible.
3. aria-label sur éléments non supportés
<!-- Ne fonctionne pas sur un div sans rôle -->
<div aria-label="Information importante">
Ce texte ne sera pas associé au label.
</div>
<!-- Solution : utiliser un landmark ou du texte visible -->
<section aria-label="Information importante">
Ce texte sera correctement associé.
</section>
4. Oublier de cacher le contenu décoratif
<!-- Le lecteur lira le texte de l'icône en plus -->
<button aria-label="Fermer">
<svg><!-- contenu SVG avec texte --></svg>
</button>
<!-- Correct : cacher l'icône décorative -->
<button aria-label="Fermer">
<svg aria-hidden="true"><!-- contenu SVG --></svg>
</button>
5. Noms accessibles trop génériques
<!-- Trop vague -->
<button aria-label="Cliquez ici">...</button>
<button aria-label="Bouton">...</button>
<!-- Descriptif et actionnable -->
<button aria-label="Ajouter au panier">...</button>
<button aria-label="Ouvrir le menu de navigation">...</button>
Bonnes pratiques de rédaction
Être concis mais descriptif
<!-- Trop long -->
<button aria-label="Cliquez sur ce bouton pour fermer la fenêtre modale de confirmation">
<!-- Équilibré -->
<button aria-label="Fermer la fenêtre de confirmation">
Commencer par l'action
<!-- Préféré : verbe d'action en premier -->
<button aria-label="Supprimer le commentaire">
<!-- Moins clair -->
<button aria-label="Commentaire - Supprimer">
Éviter les informations redondantes
<!-- Le "bouton" est déjà annoncé par le rôle -->
<button aria-label="Bouton de recherche">
<!-- Correct -->
<button aria-label="Rechercher">
Inclure le contexte si nécessaire
<!-- Ambigu si plusieurs listes -->
<button aria-label="Supprimer">
<!-- Contextualisé -->
<button aria-label="Supprimer de la liste de souhaits">
Tester vos aria-label
Avec un lecteur d'écran
- Activez NVDA (Windows) ou VoiceOver (Mac)
- Naviguez jusqu'à l'élément
- Vérifiez que l'annonce est claire et complète
Avec les outils de développement
Chrome DevTools > Éléments > Accessibility panel affiche le "Computed Name" de chaque élément.
Avec notre outil d'audit
Notre outil d'audit RGAA détecte :
- Les éléments interactifs sans nom accessible
- Les aria-label sur éléments non supportés
- Les noms accessibles potentiellement problématiques
Alternatives à aria-label
| Situation | Solution recommandée |
|---|---|
| Texte visible possible | Afficher le texte |
| Texte existe ailleurs | aria-labelledby |
| Champ de formulaire | <label for="..."> |
| Image | alt="..." |
| iframe | title="..." |
| Aucune alternative | aria-label |
Conclusion
aria-label est un outil puissant pour l'accessibilité, mais il doit être utilisé avec discernement. Privilégiez toujours le texte visible quand c'est possible, puis aria-labelledby si le texte existe déjà, et enfin aria-label en dernier recours.
Rappelez-vous que aria-label ne fonctionne que sur les éléments interactifs et les landmarks. L'utiliser sur un <div> ou <span> sans rôle est une erreur courante qui n'apporte aucun bénéfice.
En suivant ces bonnes pratiques, vous garantissez des noms accessibles clairs et utiles pour tous vos utilisateurs de technologies d'assistance.
Guides RGAA associés
Pour aller plus loin sur les sujets abordés dans cet article, consultez nos fiches techniques :
Chaque champ de formulaire doit avoir une étiquette (label) qui lui est liée explicitement.
Chaque image porteuse d'information doit avoir une alternative textuelle pertinente via l'attribut alt. Les images décoratives doivent avoir un attribut alt vide.
L'intitulé de chaque lien doit être explicite et permettre de comprendre la destination ou la fonction du lien, même hors contexte.
Articles similaires
Votre site est-il conforme ?
Ne prenez pas de risques avec l'accessibilité. Lancez un audit complet de votre site en quelques minutes et obtenez un rapport détaillé des corrections à apporter.