Introduction

Les composants développés avec JavaScript sont inconnus du navigateur qui ne peut pas communiquer les propriétés et les états de ces éléments aux technologies d'assistance par l’intermédiaire des API d'accessibilité. Par ailleurs, si ces composants doivent interagir avec l'utilisateur, le navigateur ne connaît pas non plus les comportements à implémenter, au clavier notamment.

L'API ARIA a pour rôle de permettre aux développeurs d'informer le navigateur de l'ensemble des propriétés et des états des composants développés avec JavaScript et, avec des motifs de conceptions rigoureux, de proposer des modèles d'utilisation au clavier.

ARIA propose un dispositif simple pour indiquer les grandes structures du document et quelques propriétés particulières pour rendre accessibles les zones de la page mises à jour dynamiquement.

Généralités

Rôle, état et propriété

L'API décrit trois types de propriétés : des rôles, des états et des propriétés.

Les rôles permettent d'indiquer le type de composant ou d'élément. ARIA propose une soixantaine de rôles. Certains sont spécifiques à des modèles de composants, d'autres équivalent à des éléments HTML.

Quelques exemples : dialog pour une fenêtre de dialogue, slider pour un potentiomètre de saisie, tabpanel pour un système d'onglets, heading équivalent à hx, list et listitem équivalent aux balises ul et li, button équivalent à la balise button.

Les états et les propriétés permettent de décrire le composant et d'informer de ses changements d'états. Les états et les propriétés sont toujours préfixés par aria-.

Quelques exemples de propriétés : aria-valuemin pour indiquer la valeur minimum d'un composant, aria-level pour indiquer le niveau d'un élément dans un groupe (par exemple avec heading ou listitem), aria-required pour indiquer si une saisie de valeur est obligatoire.

Quelques exemples d'états : aria-selected pour indiquer si un composant est sélectionné, aria-expanded pour indiquer si un composant est ouvert ou fermé, aria-invalid pour indiquer si une valeur est fausse.

Enfin, certains rôles, états ou propriétés sont spécifiques à des besoins particuliers : comme la description des relations entre les différentes parties d'un composant, la description des grandes structures d'un document ou d'une interface, la gestion des mises à jour dynamiques, la nature du contenu (application ou document), le statut de restitution.

Quelques exemples : aria-haspopup signale qu'un composant contrôle un menu contextuel ou un sous-menu, main signale la partie principale d'un document, aria-live contrôle la restitution d'un contenu dynamique, application signale que le contenu se comporte comme une application, aria-hidden signale que la restitution est inhibée.

Implémentation

Le principe d'implémentation est très trivial : ARIA s'implémente comme un jeu d'attributs dont les valeurs qui le nécessitent vont être controlées par JavaScript.

Par exemple une case à cocher s'implémentera de la manière suivante :

<span role="checkbox" tabindex="0" aria-checked="false" aria-labelledby="labelcheckbox">
<span id="labelcheckbox">Oui</span>

Objectifs de l'API ARIA

Définir les composants d'interface et de structure

ARIA va donc permettre de définir l'intégralité d'un composant : son rôle, ses états et propriétés, sa structure et son comportement.

Informer de l'état et des propriétés des composants d'interface

En s'appuyant sur l'implémentation d'ARIA par le développeur, le navigateur va transmettre l'ensemble des informations aux APIs d'accessibilité du système.

Attention !ARIA est une API purement descriptive. Ce n'est pas parce que vous allez déclarer qu'un span a un rôle checkbox que le navigateur va implémenter le comportement d'une case à cocher. L'intégralité du comportement, les événements, la mise à jour des états et des propriétés, le comportement au clavier incombe au développeur via JavaScript.

Informer et gérer les mises à jour de contenus dynamiques

Il existe une exception : la gestion des zones mises à jour dynamiquement, ce qu'on appelle une live region. Une région contrôlée par aria-live ou une fenêtre d'alerte contrôlée par le rôle alert sont prises en charge par le navigateur qui informera l'API d'accessibilité des changements opérés sur ces zones.

Rendre les composants utilisables au clavier

Tout composant doit être opérable au clavier. Pour chaque composant qu'il définit, ARIA propose donc un comportement au clavier normalisé de telle sorte que les composants interagissent de manière uniforme en reprenant les concepts à l'œuvre dans les logiciels notamment.

Cette partie de la conception d'un composant avec ARIA peut devenir complexe car elle met en jeu des interactions au clavier particulièrement riches.