Qu’est-ce que les rôles ARIA et comment les utiliser ?

Ce que j’ai fait :

• lire l’article Utiliser ARIA(lien externe) du Guide du développeur
• lire l’article Accessible Rich Internet Applications (ARIA)(lien externe) de Any Surfer
• lire l’article Categorization of Roles(lien externe) du W3C (World Wide Web Consortium)

Ce que j’ai appris

Définition

Dans la surcouche sémantique d’ARIA, les attributs rôles définissent ce qu’un élément fait, c’est à dire le rôle qu’il a dans une page. Ils nous donnent des informations sur l’objectif d’un élément HTML.

Un attribut role peut-être ajouté à tout élément HTML : si l’élément n’a pas de rôle, l’attribut role va lui en ajouter un.

Les différents types de rôles

Il existe pas moins de 82 rôles ARIA (oui je me suis amusée à les compter sur la liste établie par le W3C(lien externe)).

Ces rôles sont divisés en 6 catégories :

• Abstract Roles (12 rôles) : les abstract roles sont le fondement sur lequel tous les autres rôles ARIA sont construits et ne doivent pas être utilisés dans la création de contenus.

• Widget Roles (29 rôles) : les widget roles agissent comme des composants d’interfaces autonomes. Par exemple: role="button" ou role="checkbox" ou role="tab". Certains rôles widget se définissent comme des conteneurs qui intègrent d’autres composants d’interfaces. Par exemple : role="grid" ou role="menu".

• Document Structure (26 rôles) : ces rôles décrivent les structures qui organisent le contenu d‘une page. Ils ne sont généralement pas interactifs. Par exemple : role="img" ou role="article" ou role="list".

• Landmark Roles (8 rôles) : les landmark roles permettent aux utilisateurs et utilisatrices de lecteurs d’écran de mieux comprendre le rôle d’une zone et donc de mieux naviguer dans la page. Par exemple : role="main" ou role="search" ou role="navigation". Vous pouvez voir une démonstration de l’utilité de ces landmark roles sur la vidéo How ARIA landmark roles help screen reader users(lien externe) de Léonie Watson.

• Live Region Roles (5 rôles) : ces rôles correspondent à des “live regions”, c’est-à-dire des zones de page mises à jour sans que la position de l’internaute ne soit modifiée. Par exemple : role="alert" ou role="timer".

• Window Roles (2 rôles) : les window roles agissent comme des fenêtres dans le navigateur ou l’application. Par exemple : role="alertdialog" ou role="dialog".

Des attributs à manier avec prudence

Privilégier les éléments HTML natifs

La première règle d’ARIA stipule :

Ne pas utiliser ARIA s’il est possible d’utiliser un élément HTML natif ou un attribut avec la sémantique et le comportement désiré.

En effet, les éléments HTML possèdent par défaut un rôle natif : beaucoup de rôles ARIA sont équivalents à ceux des éléments HTML natifs. Par exemple :

<span role="heading" aria-level="1">Titre de niveau 1</span>

Dans cet exemple, les attributs role="heading" et aria-level="1" permettent de transformer un simple élément <span> en titre de niveau 1. Mieux vaut privilégier l’émént HTML natif <h1>.

Préserver la sémantique native des éléments

La deuxième règle d’ARIA précise :

Ne pas changer la sémantique native d’une élément, à moins que cela ne soit vraiment indispensable.

Les technologies d’assistance se basent prioritairement sur la sémantique native des éléments HTML : l’internaute s’attend donc à trouver un certain comportement. Modifier cette sémantique avec ARIA risque de rendre certaines fonctionnalités essentielles inopérables. Par exemple :

<h1 role="button">Titre Bouton</h1>

L’ajout de l’attribut role="button" sur un élément de titre bloque la navigation de titre en titre fournie par les technologies d’assistance. Mieux vaut donc écrire :

<h1><button>titre bouton</button></h1>

Notes

role="none" et role="presentation"

Dans les document structure roles, role="none" est équivalent à role="presentation" : ils suppriment tous deux la valeur sémantique d’un élément et de ses éléments enfants associés. C’est par exemple le cas lorsqu’un tableau HTML est employé uniquement à des fins de présentation :

<table role="presentation">[...]</table>

Un lecteur d’écran ne restituera donc pas un tableau mais uniquement son contenu, comme s’il était du simple texte. Par ailleurs les fonctionnalités de navigation spécifiques aux tableaux ne seront plus actives.

Plusieurs rôles sur un élément ?

Plusieurs rôles ARIA peuvent être spécifiés pour un seul élément HTML, sous forme d’une liste de rôles séparés par des espaces. Cette méthode peut notamment être employée lorsque l’on souhaite ajouter un fallback à un rôle présumé non supporté par certaines technologies d’assistance.

Steve Faulkner, dans son article Notes on use of multiple ARIA role attribute values(lien externe), a testé la restitution de rôles multiples par différents lecteurs d’écran. Résultat : le support des rôles multiples n’est pas encore optimal et doit à priori être évité. L’article datant cependant de 2015, des améliorations ont pu être apportées depuis.