aria-required-attr
Les rôles dotés d’un état ou d’une propriété ARIA requis doivent le porter
Vérifie que les éléments dotés d’un rôle explicite portent chaque état/propriété aria-* requis, sans ambiguïté et indépendant du contexte, pour ce rôle (p. ex. role="checkbox" doit avoir aria-checked).
Applicabilité. S’applique aux éléments dotés d’un rôle explicite, valide et non abstrait qui fait aussi partie du petit ensemble de rôles ayant un état/une propriété requis documenté et indépendant du contexte (checkbox, combobox, heading, menuitemcheckbox, menuitemradio, meter, radio, scrollbar, separator, slider, switch), sauf lorsque ce rôle explicite est identique au rôle natif/implicite de l’élément (ACT 4e8ab6 : p. ex. <input type="checkbox" role="checkbox">, exempté parce que l’exposition native de l’état du contrôle le couvre déjà ; aucun aria-checked n’est requis. helpers.aria.getNativeRoleForElement résout ce cas). Un <input type="checkbox"> ou <input type="radio"> natif doté d’un autre rôle cochable (switch, menuitemcheckbox, menuitemradio, ou checkbox sur un radio et inversement) est dans le périmètre, mais son aria-checked compte comme fourni : le navigateur expose l’état checked propre à l’input (HTML-AAM), il réussit donc sans l’attribut.
Attendu. Chaque état/propriété requis pour ce rôle est présent et non vide. Le résultat dépend de ce qu’ARIA fournit, ou non, une valeur de repli pour l’attribut manquant :
faillorsqu’il n’y en a pas, si bien que l’état n’est tout simplement pas exposé (aria-checked sur checkbox/radio/switch/menuitemcheckbox/menuitemradio, aria-valuenow sur slider/scrollbar/meter et sur un separator focalisable).cantTelllorsqu’ARIA définit une valeur implicite à laquelle le rôle se replie (aria-expanded sur combobox, aria-level sur heading) : le rôle expose donc toujours une valeur, et seul l’auteur sait si c’est la bonne.
Ce que rapporte un constat.
attr: l’attribut requis manquant ou vide.role: le rôle de l’élément.implicitValue(le cascantTell) : la valeur à laquelle ARIA se rabat,falsepour aria-expanded sur une combobox,2pour aria-level sur un titre.
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="checkbox" aria-checked="true"></div>
role="checkbox" exige aria-checked, et il est présent.
<div role="checkbox"></div>
role="checkbox" exige aria-checked, qui est totalement absent.
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_ATTR_REQUIRED_MISSING_IMPLICIT
- Inspectez l’élément indiqué par le rapport et notez son rôle et l’attribut manquant (comme aria-expanded sur une combobox, aria-level sur un titre).
- Pour une combobox, ouvrez et fermez sa fenêtre contextuelle au clavier (Alt+Flèche bas, Échap) et à la souris, et vérifiez si aria-expanded est ajouté et mis à jour.
- Pour un titre, comparez sa place dans la structure de la page avec le niveau 2, celui qu’il reçoit par défaut, et vérifiez si un autre niveau était voulu.
- Avec un lecteur d’écran, placez-vous sur l’élément et écoutez l’état ou le niveau annoncé.
Réussite. La valeur par défaut correspond à la réalité : la combobox n’indique « réduite » que lorsque sa fenêtre contextuelle est fermée, ou le titre est vraiment de niveau 2.
Échec. La valeur annoncée est fausse, par exemple une combobox annoncée réduite alors que sa liste est ouverte, ou un titre de niveau 2 qui devrait avoir un autre niveau, ce qui ne respecte pas le critère WCAG 4.1.2 (ou 1.3.1 pour les titres).
state_internals
- Inspectez l’élément personnalisé indiqué par le rapport et notez son rôle et l’état manquant (comme checked ou value).
- Ouvrez le panneau Accessibilité des outils de développement du navigateur et vérifiez si cet état apparaît pour l’élément.
- Actionnez l’élément (cliquez dessus, appuyez sur Espace ou sur les touches fléchées) et vérifiez si l’état affiché dans le panneau change.
- Avec un lecteur d’écran, placez-vous sur l’élément et écoutez l’état annoncé.
Réussite. L’état est exposé et se met à jour quand on utilise l’élément, défini par l’intermédiaire de ses internals.
Échec. L’état requis est absent de l’arbre d’accessibilité ou ne change pas quand on utilise l’élément, ce qui ne respecte pas le critère WCAG 4.1.2.