ARIA : bonnes pratiques
WAI-ARIA est une spécification du W3C qui ajoute des rôles, états et propriétés au HTML pour les technologies d’assistance. Règle d’or : « pas d’ARIA vaut mieux qu’un mauvais ARIA ». Utilisez d’abord l’élément natif.
Les règles essentielles
aria-label: nom accessible d’un bouton sans texte visible, qui doit contenir le texte visible quand il existe.aria-expanded: état ouvert/fermé d’un accordéon ou d’un menu.role="alert": notification importante annoncée immédiatement.aria-live: mises à jour dynamiques (polite,assertive,off).- Ne pas surcharger : ARIA uniquement quand le HTML natif est insuffisant ; un rôle ARIA exige le comportement clavier correspondant.
Exemple de code
<!-- Préférer le natif -->
<button type="button" aria-expanded="false" aria-controls="panneau">Détails</button>
<div id="panneau" hidden>…</div>
<!-- Bouton icône : nom accessible -->
<button type="button" aria-label="Fermer"><svg aria-hidden="true" focusable="false">…</svg></button>Comment tester
Inspectez l’arbre d’accessibilité dans les outils de développement, puis écoutez le rendu avec NVDA ou VoiceOver. Critères RGAA : 7.1 (compatibilité avec les technologies d’assistance) et 7.5 (messages de statut). Aide-mémoire : ARIA Authoring Practices Guide.
Questions fréquentes
Pourquoi éviter ARIA quand c’est possible ?
Un bouton natif apporte rôle, focus et activation au clavier sans effort. ARIA mal appliqué dégrade l’expérience des utilisateurs de lecteurs d’écran.
Qu’est-ce qu’un nom accessible ?
C’est le texte que les technologies d’assistance annoncent pour un élément ; il vient du contenu, d’un label ou d’aria-label.