Après les rôles, focus sur les états et propriétés définies par ARIA

Ce que j’ai fait :

• lire l’article Utiliser ARIA(lien externe) du Guide du développeur
• regarder la vidéo States and Properties in ARIA(lien externe) de A11ycasts
• lire l’article Supported States and Properties(lien externe) du W3C (World Wide Web Consortium)

Ce que j’ai appris

États versus propriétés

Similitudes

La spécification ARIA précise :

The terms “states” and “properties” refer to similar features.

Les termes “états” et “propriétés” ont des caractéristiques similaires.

Il s’agit en effet, dans les deux cas, d’attributs servant à définir un élément et à préciser des informations à son sujet. Le nom de ces attributs commencent systématiquement par “aria-“.

Différences

Les propriétés ARIA permettent de donner une signification supplémentaire à un élément ou d’établir des liens entre différents éléments. Par exemple :

• aria-required="true" spécifie qu’un champ doit être renseigné pour valider le formulaire

• aria-labelledby="..." permet de mettre un id sur un élément, puis de le référencer en tant qu’étiquette pour un ou plusieurs autres éléments de la page

Les états ARIA définissent l’état actuel d’un élément dans la page. Par exemple :

• aria-disabled="true" spécifie que le champ d’un formulaire est actuellement désactivé

• aria-expanded="true" indique qu’un menu déroulant est ouvert

La différence entre états et propriétés est qu’une propriété va rarement changer, tandis qu’un état est amené à changer régulièrement, notamment par le biais d’actions réalisées par l’internaute. A noter que certaines propriétés peuvent aussi être modifiées, comme par exemple aria-valuetext.

Etant donné la faible différence entre états et propriétés, la spécification ARIA du W3C fait d’ailleurs référence à la fois aux états et aux propriétés sous le terme générique “attributs”, dans la mesure du possible.

Typologie des états et propriétés

Certains états et propriétés sont dit “globaux”, c’est à dire qu’ils peuvent s’appliquer à tous les éléments HTML, indépendamment de leur rôle ARIA. Il existe 21 états et propriétés globales, que vous pouvez retrouver dans cette liste(lien externe). Par exemple, l’attribut aria-haspopup="true" permet d’annoncer l’existence d’un sous-menu.

En revanche, d’autres états et propriétés ne peuvent être utilisés qu’en présence d’un rôle spécifique. C’est le cas par exemple de aria-checked qui ne peut être utilisé qu’en combinaison avec certains rôles comme checkbox, radio ou switch.

Les 46 états et propriétés (globaux et non globaux) se répartissent en 4 grandes catégories :

• Widget Attributes (24 attributs) : ces attributs relèvent de l’interaction avec l’internaute et sont pris en charge par les rôles widget.

• Live Region Attributes (4 attributs) : ces attributs sont pris en charge par les rôles de la même catégorie et indiquent des changements de contenu sans modifier la position courante de l’internaute.

• Drag-and-dDrop Attributes (2 attributs) : ces attributs sont relatifs aux éléments d’interface utilisant le glisser-déposer.

• Relationship Attributes (16 attributs) : ces attributs clarifient les relations entre des éléments qui ne peuvent pas être facilement déterminées à partir de la structure du document.