Maîtrisez les attributs ARIA essentiels pour améliorer l'accessibilité web. Apprenez à implémenter aria-label, aria-describedby, aria-hidden, et les rôles ARIA pour les lecteurs d'écran.
Introduction à ARIA
ARIA (Accessible Rich Internet Applications) est un ensemble de standards W3C qui permet d'améliorer l'accessibilité des applications web pour les personnes en situation de handicap, notamment les utilisateurs de lecteurs d'écran. ARIA fournit des attributs HTML qui décrivent le rôle, l'état et les propriétés des éléments dynamiques.
L'accessibilité web n'est pas optionnelle : c'est un droit. En France, l'article 47 de la loi Handicap de 2005 oblige les sites web publics à être accessibles. De plus, une meilleure accessibilité améliore le SEO et l'expérience utilisateur pour tous.
Les attributs ARIA essentiels
Les attributs ARIA les plus importants à connaître sont aria-label, aria-describedby, aria-hidden, aria-live, aria-expanded et aria-selected. Chacun joue un rôle spécifique dans la communication avec les lecteurs d'écran.
aria-label
Fournit un label invisible pour les lecteurs d'écran. Utile quand il n'y a pas de texte visible.
<button aria-label="Fermer la fenêtre">✕</button>
<a href="#" aria-label="Partager sur LinkedIn">
<svg>...</svg>
</a>aria-describedby
Lie un élément à une description plus longue. Référence l'ID d'un autre élément.
<input type="password" aria-describedby="pwd-hint" />
<span id="pwd-hint">Minimum 12 caractères avec majuscules et chiffres</span>aria-hidden
Cache un élément des lecteurs d'écran. À utiliser avec parcimonie pour les éléments purement visuels.
<span aria-hidden="true">⚠️</span>
<span class="decorative" aria-hidden="true"></span>aria-live
Annonce les mises à jour dynamiques aux lecteurs d'écran. Valeurs : polite, assertive ou off.
<div aria-live="polite" aria-atomic="true">
<!-- Les mises à jour ici seront annoncées -->
</div>aria-expanded
Indique si un élément est agrandi ou réduit. Idéal pour les accordéons et menus déroulants.
<button aria-expanded="false" aria-controls="menu">
Menu
</button>
<ul id="menu" hidden>...</ul>Les rôles ARIA
Les rôles ARIA définissent le type d'élément. Il existe trois catégories : les rôles de document, les rôles de widget et les rôles de structure. Voici les plus utilisés :
| Rôle | Cas d'usage | Exemple |
|---|---|---|
| button | Un bouton personnalisé | <div role="button"> |
| tab | Un onglet dans une interface à onglets | <div role="tab"> |
| dialog | Une boîte de dialogue modale | <div role="dialog"> |
| alert | Un message d'alerte | <div role="alert"> |
| navigation | Une section de navigation | <nav role="navigation"> |
Exemples pratiques
Voici comment implémenter ARIA dans des situations courantes :
Modal accessible
<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
<h2 id="modal-title">Confirmer votre action</h2>
<p>Êtes-vous sûr de vouloir continuer ?</p>
<button>Annuler</button>
<button>Confirmer</button>
</div>Navigation accessible
<nav role="navigation" aria-label="Navigation principale">
<ul>
<li><a href="/" aria-current="page">Accueil</a></li>
<li><a href="/about">À propos</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>Bouton personnalisé avec icône
<div role="button" tabindex="0" aria-label="Ajouter au panier">
<svg aria-hidden="true">...</svg>
<span aria-hidden="true">+</span>
</div>Bonnes pratiques et erreurs à éviter
✅ Bonnes pratiques
- Privilégier les éléments HTML natifs (<button>, <input>, <nav>)
- Tester avec un vrai lecteur d'écran (NVDA, JAWS, VoiceOver)
- Utiliser aria-label uniquement si pas de texte visible
- Maintenir la cohérence entre le visuel et ARIA
- Ajouter aria-label à tous les boutons sans texte
❌ Erreurs à éviter
- Utiliser ARIA sur des éléments non interactifs
- Cacher du contenu important avec aria-hidden="true"
- Oublier aria-label sur les icônes seules
- Utiliser role="button" sur un <div> sans keyboard support
- Donner des labels génériques ("Cliquez ici", "En savoir plus")
Tester l'accessibilité
Il existe plusieurs outils pour tester l'accessibilité de votre site :
Outils automatisés
- Axe DevTools : Extension Chrome/Firefox gratuite pour audits d'accessibilité
- Wave : Outil en ligne pour vérifier les problèmes d'accessibilité
- Lighthouse : Audit intégré dans Chrome DevTools
- Pa11y : Outil CLI pour tester l'accessibilité
Tests manuels
- Tester au clavier : Naviguer avec Tab et Shift+Tab seulement
- NVDA (gratuit) : Lecteur d'écran pour Windows
- JAWS (payant) : Lecteur d'écran professionnel
- VoiceOver (Mac/iOS) : Lecteur d'écran natif Apple
