Rôle WAI-ARIA
Un rôle WAI-ARIA est un attribut HTML qui indique aux technologies d'assistance la nature d'un élément : bouton, onglet, alerte, zone de navigation. Les éléments HTML sémantiques portent déjà un rôle implicite. Un <button> est annoncé comme bouton sans configuration. Les rôles ARIA ne servent que lorsque le HTML natif ne peut pas exprimer la sémantique voulue.
Un <div> avec un gestionnaire de clic ressemble visuellement à un bouton. Un utilisateur de lecteur d'écran arrive dessus : silence. Le lecteur d'écran ne sait pas ce qu'est cet élément ni comment interagir avec. L'attribut role résout ce problème en une ligne.
#Comment fonctionne un rôle
Chaque élément HTML possède (ou non) un rôle dans l'arbre d'accessibilité. Un <button> porte le rôle implicite button. Un <nav> porte le rôle navigation. Un <div> seul ne porte aucun rôle : il retourne null.
Quand le HTML sémantique ne suffit pas, l'attribut role ajoute cette information manuellement :
<div role="tablist">
<div role="tab" aria-selected="true">Onglet 1</div>
<div role="tab" aria-selected="false">Onglet 2</div>
</div>Le lecteur d'écran annonce alors « onglet 1, sélectionné, onglet 1 sur 2 ». Sans ces rôles, il annonce « texte ».
La spécification WAI-ARIA du W3C organise les rôles en six catégories :
| Catégorie | Exemples | Usage |
|---|---|---|
| Widget | button, tab, slider | Composants interactifs |
| Landmark | banner, main, navigation | Régions structurelles de la page |
| Structure | heading, list, row | Organisation du contenu |
| Live region | alert, status, log | Zones mises à jour dynamiquement |
| Window | dialog, alertdialog | Fenêtres modales |
| Abstract | widget, roletype | Réservés à la taxonomie, jamais dans le code |
Le RGAA s'appuie sur ces rôles dans plusieurs critères. Le critère 7.1 vérifie que chaque composant interactif en JavaScript possède un rôle compatible avec sa fonction.
#La première règle : ne pas utiliser ARIA
C'est la première règle de la spécification ARIA in HTML : si un élément HTML natif avec la sémantique et le comportement voulus existe, utilisez-le au lieu d'ajouter un rôle ARIA.
Un <div role="button"> annonce « bouton » au lecteur d'écran, mais il ne reçoit pas le focus clavier, ne réagit pas à la touche Entrée, et ne soumet pas un formulaire. Un vrai <button> fait tout cela nativement. Ajouter un rôle sans recréer le comportement complet donne un composant qui ment aux technologies d'assistance.
Autre piège : modifier un rôle dynamiquement. La spécification WAI-ARIA l'interdit. Un élément qui est un tab doit rester un tab. Pour changer de nature, supprimez l'élément et recréez-en un nouveau.
#En résumé
Privilégiez les balises HTML sémantiques : elles portent des rôles implicites, gèrent le clavier et le focus sans code supplémentaire. N'ajoutez role que pour les composants absents du HTML natif (onglets, menus, sliders). Quand vous le faites, suivez les motifs de conception du W3C APG qui documentent le comportement attendu pour chaque rôle.