S’il est toujours préférable d’utiliser des éléments HTML natifs – Focus, utilisation du clavier, HTML sémantique – il existe des cas où le HTML ne suffit pas. Car il n’existe aucun élément HTML pour construire un menu contextuel par exemple.
Qu’est-ce qu’ARIA ?
Accessible Rich Internet Applications (ARIA) (qu’on pourrait traduire par « applications internet riches et accessibles ») sont un ensemble d’attributs qui définit comment rendre le contenu et les applications web accessibles. Source : Aria
ARIA fournit des moyens de rendre les applications Web plus accessible et les composants dynamiques à une plus grande part des utilisateurs, y compris ceux utilisant des technologies d’assistance telles que les lecteurs d’écrans ou les agrandisseurs.
ARIA fournit des éléments sémantiques additionnels afin de décrire les rôles, les états et la fonction de nombreux contrôles d’interfaces utilisateurs répandus, tels que les menus, les curseurs, les arbres et les dialogues. Il fournit également des informations structurelles supplémentaires, permettant aux auteurs d’identifier des points de repère, des zones et des grilles dans leurs pages Web. ARIA permet aux applications et aux composants JavaScript dynamiques d’interagir avec une grande variété de technologies d’assistance de bureau. Source : Aria
Les motifs de conception ARIA
Un motif de conception est composé de deux éléments :
- l’un décrit la structure du composant, les rôles, propriétés et états à utiliser,
- l’autre décrit le comportement attendu du composant et l’ensemble des interactions au clavier qui doivent être implémentées.
Ces motifs de conception permettent aux technologies d’assistance et aux navigateurs de disposer de composants dont le comportement est prédictif. Afin de s’assurer que les restitutions, et surtout la manipulation de ces composants par les utilisateurs, seront cohérentes.
La fenêtre de dialogue/fenêtre modale
Une fenêtre modale est une fenêtre qui apparait au-dessus de la page consultée, la page a partir de laquelle elle a été appelée. Elle prend le contrôle sur la page tant qu’elle est affichée à l’écran.
Fenêtre modale sans titre affiché à l’écran
<div role="dialog" id="mymodale" aria-label="Connection"> <button>Fermer</button> [contenu] </div>
Fenêtre modale avec titre affiché à l’écran
<div role="dialog" id="mymodale" aria-labelledby="titre-modal"> <button>Fermer</button> <h1 id="titre-modal">Titre</h1> […] </div>
Les rôles, états et propriétés ARIA
- Le rôle « dialog » signale aux technologies d’assistance qu’il s’agit d’une fenêtre de dialogue. Il est appliqué sur le conteneur.
- Si la modale comporte un titre : il doit être rattaché à l’attribut « aria-labelledby » – Le titre a un attribut ID (valeur unique)
« aria-labelledby » a la même valeur que ID - Si la modale n’a pas de titre : « aria-label » est renseigné sur le conteneur de la modale.
Interactions au clavier
TAB : Le focus se déplace dans les éléments de la fenêtre modale.
Le problème du focus à l’ouverture de la modale : Ou doit aller le focus lorsque le fenêtre est ouverte ?
-> Réponse : Le focus doit aller se positionner sur le premier élément interactif (capable de recevoir le focus) dans la fenêtre.
Le problème du focus à la fermeture de la modale : Ou doit aller le focus lorsque le fenêtre est ou fermée ?
-> Réponse : Redonner le focus à l’élément qui a permis l’ouverture de la fenêtre (la fenêtre doit pouvoir se fermer avec la touche ESC au moins)
MAJ+TAB : Déplacement dans l’ordre inverse de lecture.
ECHAP : Fermeture de la fenêtre modale
Restitution
NVDA le restitue par « Connexion dialogue »
JAWS par « Connexion, boite de dialogue ».