Aussi disponible en : English · Español · Português · العربية
Rôles ARIA : quel élément en a besoin et lequel en a déjà un
Cherchez n'importe quel élément HTML et n'importe quel rôle ARIA, et voyez si vous devez l'écrire, si vous le pouvez, ou si l'élément est déjà cette chose.
Qu'est-ce qu'un rôle ARIA ?
Un rôle ARIA indique aux technologies d'assistance ce qu'est un fragment de balisage : un bouton, un repère de navigation, un titre, une boîte de dialogue. On l'écrit role="button", et cela change la façon dont un lecteur d'écran l'annonce et ce que l'utilisateur peut en faire.
WAI-ARIA définit les rôles. Une seconde spécification, ARIA in HTML, répond à la question que les gens se posent réellement — quels rôles peuvent aller sur quel élément HTML — au moyen d'une table couvrant 139 éléments. C'est cette table qui fonde cette page, et c'est elle qu'il faut lire, car les rôles ne sont pas interchangeables d'un élément à l'autre.
Le plus utile s'y remarque à peine : 81 de ces 139 éléments portent déjà un rôle sans le moindre attribut, et l'en-tête de la table précise que les écrire dans le balisage est déconseillé. Un élément button est déjà un bouton. Un h1 est déjà un titre, avec son niveau. La plupart du temps, la bonne réponse à « quel rôle mettre ici » est aucun.
Comment l'utiliser
- Tapez l'élément. Le seul nom de balise ; chevrons et majuscules ne gênent pas. Là où la spécification qualifie un élément, le nom nu mène à la ligne qualifiée : taper a donne la règle de a with href.
- Tapez le rôle que vous alliez écrire. Vous obtenez l'une de quatre réponses : l'élément l'a déjà, c'est autorisé, ce n'est pas autorisé ici, ou la règle est conditionnelle et aucune réponse tranchée n'existe.
- Regardez ensuite l'index inversé en dessous. Il liste les éléments qui portent déjà ce rôle sans attribut, séparément de ceux qui se contentent de l'accepter. C'est souvent la meilleure façon de régler le problème.
Redondant n'est pas synonyme de faux
Écrire role="button" sur un élément button est du balisage valide. Ce n'est pas une erreur et rien ne casse. La spécification le déconseille parce que cela n'apporte rien et peut se désynchroniser : changez l'élément plus tard et le rôle reste là, décrivant une chose qui n'existe plus. Cette page en fait un verdict à part plutôt que de le confondre avec les vraies erreurs, car dire à quelqu'un que son balisage correct est cassé est pire que se taire.
Les cas réellement interdits, eux, sont autre chose. 51 éléments n'acceptent aucun rôle en plus du leur — main, body, html, base, caption et les autres — si bien que role="navigation" sur un main n'est tout simplement pas permis. 37 autres n'acceptent qu'un ensemble précis : un a with href prend button, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab ou tree, et rien d'autre. Et 41 éléments, les pages blanches comme span et abbr, acceptent n'importe quel rôle.
Restent les rôles eux-mêmes, dont la table en nomme 75. Si vous en cherchez un, l'index inversé est le raccourci : demandez quels éléments sont déjà un bouton avant de décider d'en fabriquer un avec une div.
Dix éléments sur lesquels cette page ne se prononce pas
Dix des 139 règles sont assorties d'une condition, et l'outil refuse de trancher à leur sujet plutôt que de deviner. td, th et tr dépendent du rôle de l'élément table qui les contient. div dépend du fait d'être enfant direct d'un dl. figure dépend de la présence d'un figcaption parmi ses descendants. label dépend de son association à un élément étiquetable.
Dans chacun de ces cas, la spécification se garde d'énoncer une règle inconditionnelle : un outil qui produirait un oui ou un non assuré en inventerait une. La phrase d'origine est affichée à la place, à lire à la lumière de votre balisage réel. C'est la réponse honnête, et c'est pourquoi la page montre le texte source de chaque élément et pas seulement son propre résumé.
Deux limites de plus, à dire clairement. Il s'agit uniquement de la table des éléments : ARIA in HTML en compte deux autres, l'une sur les fonctionnalités HTML, l'autre sur les descendants admis par chaque rôle, et aucune n'est couverte ici. Et la page dit ce qui est permis, non ce qui est judicieux : un rôle permis peut rester le mauvais, et aucune table ne sait si votre composant se comporte vraiment comme un onglet.
Pourquoi est-ce gratuit ?
La table voyage avec la page pour quelques kilo-octets et chaque recherche tourne dans votre propre navigateur. Rien de ce que vous tapez n'est envoyé, rien n'est journalisé, et il n'y a aucun compte à créer.
Sans inscription, sans limite, et sans filigrane sur ce que vous copiez.