aria-roles-valid
L’attribut role doit être un rôle ARIA valide et non abstrait
Vérifie qu’un attribut role="" explicite correspond à un rôle WAI-ARIA réel et non abstrait.
Applicabilité. S’applique à tout élément doté d’un attribut role="" non vide dans le DOM composé.
Attendu. Au moins un jeton de rôle désigne un rôle ARIA concret et non abstrait. Lorsque ce n’est pas le cas, le résultat dépend du rôle auquel l’élément se replie :
failsur un hôte sans rôle (div, span, élément personnalisé), qui reste exposé comme generic : le rôle voulu par l’auteur n’atteint donc personne.cantTelllorsque l’élément a un rôle natif (un <button>, <nav>, <a href>), que l’arbre d’accessibilité continue d’utiliser. ACT 674b10 ne liste 4.1.2 que comme exigence secondaire, « satisfied through the implicit role » ; le jeton erroné mérite donc d’être signalé, mais ce n’est pas en soi le critère en échec.
Ce que rapporte un constat.
role: le premier jeton de l’attribut role. Aucun de ses jetons n’est un rôle connu, ou les rôles connus sont tous abstraits.nativeRole(le cascantTell) : le rôle natif de l’élément, que les technologies d’assistance continuent d’utiliser.
Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.
Exemples
<div role="button">Click</div>
« button » est un rôle ARIA réel et concret.
<div role="buton"></div>
« buton » n’est pas un jeton de rôle ARIA défini (faute de frappe).
Comment vérifier
Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.
ARIA_ROLE_ABSTRACT
- Inspectez l’élément indiqué par le rapport et notez le rôle abstrait (comme landmark, widget, command) et sa balise.
- Ouvrez le panneau Accessibilité des outils de développement du navigateur et vérifiez le rôle exposé à la place (le rôle natif).
- Déterminez si le rôle natif est une forme concrète du rôle abstrait indiqué (un nav pour landmark, un bouton pour widget).
Réussite. Le rôle natif est une forme concrète de ce que l’auteur a indiqué : l’élément reste donc exposé correctement (retirez quand même le rôle abstrait).
Échec. Le rôle natif ne correspond pas à l’intention (par exemple un bouton marqué landmark) : le rôle voulu n’est jamais exposé, ce qui ne respecte pas le critère WCAG 4.1.2 (ACT 674b10).
ARIA_ROLE_INVALID
- Inspectez l’élément indiqué par le rapport et notez la valeur de rôle inconnue et sa balise.
- Déterminez quel rôle était probablement voulu (par exemple « buton » pour button).
- Ouvrez le panneau Accessibilité des outils de développement du navigateur et vérifiez le rôle exposé à la place (le rôle natif de l’élément).
- Comparez le rôle exposé avec le rôle voulu et avec le comportement de l’élément.
Réussite. Le rôle natif exposé est celui qui était voulu : les utilisateurs obtiennent donc le bon rôle (corrigez quand même la faute de frappe).
Échec. Le rôle voulu diffère du rôle exposé : les utilisateurs obtiennent un mauvais rôle, ce qui ne respecte pas le critère WCAG 4.1.2 (ACT 674b10).