Français
Menu du site

aria-valid-attr-value

Les valeurs des attributs aria-* doivent correspondre à leur type déclaré

automaticWCAG 4.1.2 (A)confiance : highgravité : seriousrobust

Vérifie que chaque attribut aria-* reconnu a une valeur conforme au type de valeur déclaré par WAI-ARIA (booléen, tristate, jeton, entier, nombre ou référence d’ID).

Applicabilité. S’applique à tout élément portant au moins un attribut aria-* reconnu (les noms d’attributs non reconnus relèvent d’aria-valid-attr et ne sont pas évalués ici).

Attendu. La valeur de chaque attribut respecte le type de valeur déclaré par WAI-ARIA : booléen ("true"/"false"), tristate ("true"/"false"/"mixed"), un jeton d’un ensemble énuméré fixe, un entier (dans la plage que WAI-ARIA fixe pour lui), un nombre réel, ou une référence d’ID (ou liste de références) qui se résout en un élément existant du document. Les valeurs booléennes, tristate et les jetons sont lus sans tenir compte de la casse, comme les lit Chromium (aria-checked="TRUE" est coché). Selon l’applicabilité même d’ACT 6a7281 (« tout état ou propriété qui n’est PAS vide »), une valeur explicitement vide, y compris un attribut de style booléen sans « =valeur », p. ex. aria-checked seul, est hors périmètre pour tous les types de valeur et ne constitue pas une violation : c’est un motif courant et délibéré du balisage généré par gabarit (p. ex. React qui rend conditionnellement aria-describedby={hasError ? errorId : ''}). Certains attributs se contraignent aussi l’un l’autre, ce qui est vérifié une fois chacun valide en lui-même :

  • Sur un élément de rôle slider, scrollbar, progressbar, meter, separator ou spinbutton : un aria-valuemin supérieur à aria-valuemax échoue (ARIA_VALUE_RANGE_INVERTED), de même qu’un aria-valuenow hors de la plage (ARIA_VALUENOW_OUT_OF_RANGE), car le navigateur transmet alors aux technologies d’assistance la borne la plus proche à la place (Chromium annonce 10 pour 50 sur une plage de 0 à 10). La plage est celle qui est déclarée ; à défaut, celle de l’élément natif (un <progress>, un <meter>, un champ range ou number, par ses min et max), comme HTML-AAM la mappe ; à défaut, les valeurs par défaut d’ARIA, 0 et 100, sauf sur un spinbutton, qui n’en a pas. Avec aria-valuetext, annoncé à la place du nombre, la valeur n’est pas comparée.
  • Un aria-posinset supérieur à aria-setsize échoue (ARIA_POSINSET_EXCEEDS_SETSIZE) ; une taille d’ensemble de -1 (inconnue) est laissée de côté.
  • Un aria-haspopup dont la fenêtre surgissante, un élément que nomme aria-controls (ou un élément qu’il contient), a un autre rôle : cantTell (ARIA_HASPOPUP_ROLE_MISMATCH), car un script peut afficher une autre fenêtre surgissante. true signifie menu. La comparaison n’a lieu que si un élément nommé a un rôle.
  • Un aria-activedescendant qui nomme un élément qui ne se trouve ni dans l’élément ni dans un élément qu’il nomme dans aria-owns ou aria-controls : cantTell (ARIA_ACTIVEDESCENDANT_OUTSIDE). Un combobox est laissé de côté, car ses options se trouvent dans la fenêtre surgissante qu’il contrôle.

Ce que rapporte un constat.

  • attr : l’attribut dont la valeur n’est pas valide.
  • value : sa valeur telle qu’écrite.
  • valueReason : ce qui ne va pas. Sur un fail : expected-true-false, expected-true-false-undefined, expected-true-false-mixed, expected-integer, expected-number ou invalid-token lorsqu’elle n’est pas du type de l’attribut, integer-out-of-range lorsqu’elle est inférieure à la plus petite valeur autorisée par ARIA, expected-single-idref lorsqu’un attribut qui prend un seul id en contient plusieurs, idref-not-found lorsque l’id d’aria-activedescendant ne correspond à aucun élément. Sur un cantTell : idref-list-none-found lorsqu’aucun des ids d’une liste ne correspond à un élément, idref-controls-not-found pour le même cas sur aria-controls.
  • Pour les contraintes entre attributs, les valeurs comparées : role, valuenow, valuemin, valuemax (la plage utilisée, valeurs par défaut comprises) ; posinset, setsize ; haspopup, expectedRole, popupRole ; activedescendant.

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

pass
<div aria-hidden="true"></div>

« true » est une valeur valide pour aria-hidden, de type booléen.

fail
<div aria-hidden="yes"></div>

aria-hidden est de type booléen ; « yes » n’est pas un jeton booléen valide.

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_ACTIVEDESCENDANT_OUTSIDE

  1. Inspectez l’élément indiqué par le rapport et notez l’id présent dans son aria-activedescendant ainsi que l’emplacement de cet élément.
  2. Donnez le focus à l’élément et utilisez les touches fléchées pour déplacer l’élément actif.
  3. Avec un lecteur d’écran en marche, écoutez si chaque élément actif est annoncé pendant le déplacement.
  4. Vérifiez si l’élément référencé pourrait être déplacé à l’intérieur de l’élément ou lui être rattaché avec aria-owns ou aria-controls.

Réussite. Chaque élément actif est annoncé à mesure que les touches fléchées le parcourent.

Échec. Le lecteur d’écran n’annonce rien, ou un mauvais élément, quand l’élément actif change : les utilisateurs du clavier ne peuvent pas le suivre, ce qui ne respecte pas le critère WCAG 4.1.2.

ARIA_ATTR_VALUE_TARGET_ABSENT

  1. Inspectez l’élément indiqué par le rapport et notez l’attribut et les id auxquels il fait référence.
  2. Utilisez la page comme le ferait un utilisateur (ouvrir, déplier, soumettre) pour atteindre l’état où l’élément référencé devrait exister.
  3. Dans la console des outils de développement, exécutez document.getElementById('the-id') pour chaque id et cherchez dans le code un id presque identique (casse différente, faute de frappe, ou dans une autre racine shadow).
  4. Ouvrez le panneau Accessibilité des outils de développement du navigateur et vérifiez si le nom, la description ou la relation que l’attribut devrait fournir apparaît.
  5. S’il n’apparaît pas, vérifiez dans le volet Accessibilité si l’élément reçoit quand même ce nom ou cette description autrement, par exemple de son propre texte, d’un <label> ou d’un aria-label.

Réussite. L’élément référencé existe quand il le faut et le nom, la description ou la relation apparaît dans l’arbre d’accessibilité, ou l’élément reçoit le même nom ou la même description autrement.

Échec. L’id n’est jamais résolu (absent, mal orthographié ou de l’autre côté d’une limite de shadow DOM) et rien d’autre ne donne l’étiquette, la description ou la relation : elle est perdue, ce qui ne respecte pas le critère WCAG 4.1.2 (ACT 6a7281).

ARIA_HASPOPUP_ROLE_MISMATCH

  1. Inspectez l’élément indiqué par le rapport et notez la valeur de son aria-haspopup (menu, listbox, tree, grid, dialog ; true signifie menu).
  2. Ouvrez la fenêtre contextuelle à la souris et au clavier (Entrée, Espace ou Flèche bas).
  3. Inspectez la fenêtre contextuelle qui apparaît et vérifiez son rôle dans le panneau Accessibilité des outils de développement du navigateur.
  4. Comparez le rôle de la fenêtre contextuelle avec le type annoncé par aria-haspopup.

Réussite. La fenêtre contextuelle qui s’ouvre a le rôle annoncé par aria-haspopup.

Échec. La fenêtre contextuelle qui s’ouvre a un autre rôle que celui annoncé (par exemple une boîte de dialogue annoncée comme un menu), ce qui induit en erreur les utilisateurs de lecteur d’écran et ne respecte pas le critère WCAG 4.1.2.

Voir le code source