Aria-label et aria-labelledby : Guide pratique avec exemples
En Bref : L'essentiel à retenir
- aria-label fournit un nom accessible directement dans l'attribut, idéal pour les boutons icônes sans texte visible.
- aria-labelledby référence l'ID d'un élément existant, permettant de réutiliser du texte visible comme nom accessible.
- La règle "premier choix" : préférez toujours le texte visible au texte ARIA caché pour une meilleure cohérence.
- aria-describedby complète le label en ajoutant des informations secondaires comme les instructions de format.
Les attributs aria-label et aria-labelledby sont essentiels pour l'accessibilité des interfaces modernes. Mal utilisés, ils peuvent rendre votre site moins accessible. Ce guide vous montre comment les maîtriser.
Comprendre le "nom accessible"
Chaque élément interactif (bouton, lien, champ de formulaire) doit avoir un nom accessible : le texte lu par les lecteurs d'écran.
Le navigateur calcule ce nom selon un ordre de priorité :
aria-labelledby(le plus fort)aria-label- Contenu textuel de l'élément
- Attribut
title(dernier recours)
[!NOTE] ARIA signifie "Accessible Rich Internet Applications". C'est une spécification W3C qui ajoute des informations sémantiques au HTML.
aria-label : Le label invisible
aria-label définit un nom accessible directement dans l'attribut. Le texte n'est pas visible à l'écran mais lu par les technologies d'assistance.
Cas d'usage idéal : Bouton icône
<!-- Mauvais : Aucun nom accessible -->
<button>
<svg><!-- icône hamburger --></svg>
</button>
<!-- Bon : aria-label explicite -->
<button aria-label="Ouvrir le menu de navigation">
<svg aria-hidden="true"><!-- icône hamburger --></svg>
</button>
Autres exemples aria-label
<!-- Bouton de fermeture -->
<button aria-label="Fermer la fenêtre">×</button>
<!-- Lien réseau social -->
<a href="https://twitter.com/..." aria-label="Suivez-nous sur Twitter">
<svg aria-hidden="true"><!-- icône Twitter --></svg>
</a>
<!-- Champ de recherche -->
<input type="search" aria-label="Rechercher sur le site">
aria-labelledby : Réutiliser du texte existant
aria-labelledby pointe vers l'ID d'un autre élément dont le contenu textuel devient le nom accessible.
Cas d'usage idéal : Formulaire avec légende
<h2 id="section-contact">Nous contacter</h2>
<form aria-labelledby="section-contact">
<!-- Le formulaire est nommé "Nous contacter" -->
</form>
Combiner plusieurs éléments
aria-labelledby peut référencer plusieurs IDs (séparés par des espaces) :
<span id="prenom-label">Prénom</span>
<span id="requis">(obligatoire)</span>
<input type="text" aria-labelledby="prenom-label requis">
<!-- Lecteur d'écran lit : "Prénom (obligatoire)" -->
Tableau comparatif
| Critère | aria-label | aria-labelledby |
|---|---|---|
| Visibilité | Invisible | Référence texte visible |
| Syntaxe | Texte direct | ID(s) d'éléments |
| Priorité | 2ème niveau | 1er niveau (le plus fort) |
| Maintenance | Duplication possible | Centralisation du texte |
| Traduction | À traduire manuellement | Suit la traduction de la page |
aria-describedby : Le complément
aria-describedby ne remplace pas le label mais ajoute une description complémentaire.
<label for="password">Mot de passe</label>
<input type="password" id="password"
aria-describedby="password-help password-error">
<p id="password-help">Minimum 8 caractères, 1 majuscule, 1 chiffre</p>
<p id="password-error" class="error">Le mot de passe est trop court</p>
Le lecteur d'écran lit :
"Mot de passe, champ de texte. Minimum 8 caractères, 1 majuscule, 1 chiffre. Le mot de passe est trop court."
Les règles d'or
1. Préférez le texte visible
Si le texte peut être affiché, affichez-le. ARIA est un dernier recours quand le design ne peut pas montrer le texte.
<!-- 👍 Préférable : Texte visible -->
<button>Menu</button>
<!-- 👎 Acceptable si design impose une icône seule -->
<button aria-label="Menu">
<svg aria-hidden="true">...</svg>
</button>
2. N'utilisez pas aria-label sur les éléments non-interactifs
<!-- Incorrect : div n'est pas interactif -->
<div aria-label="Section importante">...</div>
<!-- Correct : Utilisez un heading -->
<section aria-labelledby="section-title">
<h2 id="section-title">Section importante</h2>
</section>
3. Masquez les icônes décoratives
Quand un bouton a un aria-label, l'icône devient décorative et doit être masquée :
<button aria-label="Supprimer l'article">
<svg aria-hidden="true"><!-- icône poubelle --></svg>
</button>
4. Respectez "Label in Name"
Le texte visible doit être inclus dans le nom accessible (WCAG 2.5.3) :
<!-- Incohérent : Le texte visible "Envoyer" n'est pas dans aria-label -->
<button aria-label="Valider le formulaire">Envoyer</button>
<!-- Cohérent -->
<button aria-label="Envoyer le formulaire de contact">Envoyer</button>
Erreurs courantes
1. Duplication inutile
<!-- Redondant : Le contenu text suffit -->
<button aria-label="Envoyer">Envoyer</button>
<!-- Simple et efficace -->
<button>Envoyer</button>
2. aria-label sur des images
<!-- aria-label ne fonctionne pas bien sur img -->
<img src="logo.png" aria-label="Logo de l'entreprise">
<!-- Utilisez alt -->
<img src="logo.png" alt="Logo de l'entreprise">
3. Oublier de cacher l'icône
<!-- L'icône est lue deux fois -->
<button aria-label="Menu">
<svg><title>Menu</title>...</svg>
</button>
<!-- L'icône est masquée -->
<button aria-label="Menu">
<svg aria-hidden="true">...</svg>
</button>
Critères RGAA concernés
| Critère | Titre | Attributs concernés |
|---|---|---|
| 1.1 | Alternative textuelle images | aria-label, aria-labelledby |
| 6.1 | Intitulé des liens | aria-label, aria-labelledby |
| 11.1 | Labels des champs | aria-label, aria-labelledby |
| 11.2 | Pertinence des labels | Tous |
Conclusion
aria-label et aria-labelledby sont des outils puissants mais à utiliser avec discernement. La règle simple : si vous pouvez montrer le texte, montrez-le. ARIA vient en complément du HTML sémantique, jamais en remplacement.
Vérifiez vos attributs ARIA avec RGAA Checker : notre outil détecte automatiquement les labels manquants et les incohérences.
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.