ARIA : la première règle est de ne pas s’en servir
Cette page fait partie de L'accessibilité numérique.
À quoi ça sert
ARIA est un jeu d’attributs qui permet de décrire aux technologies d’assistance le rôle, l’état et les propriétés d’un composant que le HTML natif ne sait pas exprimer.
Point capital : ARIA ne change rien au comportement. Il ne rend pas un élément focalisable, il ne le rend pas activable au clavier, il ne déclenche aucune action. Il ne fait que renseigner ce qui est annoncé.
La première règle d’ARIA est de ne pas s’en servir. Si un élément HTML natif fait l’affaire, il faut l’utiliser : il apporte gratuitement le rôle, le focus, l’activation au clavier et la restitution correcte dans tous les lecteurs d’écran.
Un <button> fait ce qu’un
<div role="button" tabindex="0"> tente de
réimplémenter — et il le fait sans bug, sans maintenance, et partout.
Pourquoi un mauvais ARIA est pire que pas d’ARIA
Un rôle ARIA écrase la sémantique native. Écrire
role="button" sur un lien fait annoncer « bouton » alors que la
touche d’activation attendue n’est pas la même. L’utilisateur reçoit une
information fausse, et agit en conséquence.
De même, un aria-label posé sur un élément qui contient déjà du
texte visible remplace ce texte dans la restitution : la personne qui utilise
la commande vocale prononce ce qu’elle voit, et rien ne se passe.
Les cas où ARIA est justifié
-
Nommer une région. Plusieurs zones de navigation dans une
page se distinguent par un
aria-label— « Navigation principale », « Fil d’Ariane ». C’est ce que fait ce site. - Annoncer un changement de contenu qui ne suit pas une navigation : résultats filtrés, ajout au panier, message de confirmation. La zone de message de statut doit exister avant le message.
- Décrire un état qu’aucun élément natif ne porte : un panneau dépliable ouvert ou fermé, un onglet sélectionné, un champ en erreur.
- Relier un champ à son message d’erreur ou à son texte d’aide.
- Marquer la page courante dans un menu — la restitution dit « page courante » plutôt que de compter sur une couleur.
Les quatre fautes les plus fréquentes
-
Un rôle redondant —
role="button"sur un<button>. Inutile, et signe d’une incompréhension. - Un état jamais mis à jour. Un panneau qui reste annoncé « fermé » après ouverture est pire qu’un panneau sans état.
-
aria-hiddensur un élément focalisable : il disparaît de la restitution mais reste dans l’ordre de tabulation. Le focus se pose sur du vide. -
Un
aria-labelqui contredit le texte visible.
La règle pratique
Avant d’ajouter un attribut ARIA, se demander quel élément natif on est en train de réinventer. Dans la grande majorité des cas, la réponse existe — et la meilleure correction d’accessibilité consiste alors à supprimer du code, pas à en ajouter.