ARIA
Voir aussi : WAI-ARIA, Accessible Rich Internet Applications
Applications internet riches et accessibles (Accessible Rich Internet Applications) — une spécification W3C qui définit rôles, états et propriétés pour rendre les composants d'interface personnalisés accessibles aux technologies d'assistance.
WAI-ARIA — Accessible Rich Internet Applications — est une spécification W3C qui comble un écart précis : lorsque les éléments HTML natifs ne suffisent pas à décrire un composant d’interface personnalisé, ARIA fournit un vocabulaire de rôles, d’états et de propriétés que les technologies d’assistance (en particulier les lecteurs d’écran) peuvent interpréter.
Ce qu’ARIA est et n’est pas
ARIA est une couche posée sur HTML. Elle n’ajoute pas de comportement.
Ajouter role="button" à un <div> amène le lecteur d’écran à l’annoncer
comme un bouton, mais cela ne rend pas le <div> focusable, n’ajoute pas
la gestion du clavier, et n’ajoute pas le style visuel. Il faut ajouter tout
cela soi-même.
C’est là l’origine de la plupart des bugs ARIA en production : les développeurs ajoutent le rôle et s’arrêtent là, puis livrent un « bouton » qui ne réagit pas à Entrée ou Espace, n’est pas accessible par la touche Tab, et n’a pas d’indicateur de focus.
La première règle d’ARIA
Si vous pouvez utiliser un élément HTML natif avec la sémantique et le comportement requis, faites-le.
Chaque ligne d’ARIA que l’on écrit est une ligne de sémantique HTML que l’on a
décidé de réimplémenter manuellement. <button> est déjà annoncé comme un bouton,
est focusable, réagit à Entrée et Espace, et possède un anneau de focus — gratuitement.
<div role="button" tabindex="0"> avec des gestionnaires de clavier personnalisés
permet d’arriver au même résultat, de façon fragile et avec davantage de code.
Les grandes catégories
ARIA définit trois types d’attributs :
- Rôles — ce qu’est l’élément (
role="button",role="dialog",role="navigation",role="alert"). La liste complète des rôles dépasse 80 entrées ; l’ARIA Authoring Practices Guide du W3C les regroupe en rôles de point de repère, rôles de composant et rôles de structure de document. - États — la condition actuelle de l’élément
(
aria-expanded="true",aria-checked="false",aria-disabled="true"). Les états changent à l’exécution. - Propriétés — les relations de l’élément
(
aria-labelledby="title-id",aria-describedby="help-id",aria-controls="menu-id"). Les propriétés sont généralement statiques.
Les trois autres règles d’ARIA
La séquence en cinq règles du W3C après « utiliser le HTML natif lorsque c’est possible » :
- Ne pas modifier la sémantique native, sauf nécessité absolue. (
<h1 role="button">crée une ambiguïté pour les lecteurs d’écran sur la nature de l’élément — titre ou bouton.) - Tous les composants ARIA interactifs doivent être utilisables au clavier.
- Ne pas utiliser
role="presentation"ouaria-hidden="true"sur un élément focusable. - Tous les éléments interactifs doivent avoir un nom accessible.
Respecter ces cinq règles élimine 80 % ou plus des bugs ARIA.
Où chercher
La référence opérationnelle la plus utile est l’ARIA Authoring Practices Guide (APG), qui propose des patrons d’implémentation complets pour les composants courants — zones de liste déroulante, boîtes de dialogue, arborescences, onglets — avec les tableaux d’interactions au clavier et des exemples de DOM.