Attribut ARIA obligatoire manquant

Silktide vérifie les éléments qui déclarent un rôle ARIA et confirme qu'ils fournissent aussi les attributs exigés par ce rôle. Certains rôles sont inutilisables sans leurs attributs, comme un curseur qui n'indique jamais à quelle valeur il est réglé.

<!-- Problème : un curseur doit exposer sa valeur actuelle -->
<div role="slider" tabindex="0"></div>

<!-- Correctif : fournir l'état requis -->
<div role="slider" tabindex="0"
     aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"></div>

Pourquoi c'est important

Attribuer un rôle à un élément est une promesse : « ceci est un curseur », « ceci est une case à cocher ». Des rôles comme ceux-ci exigent des attributs d'état, car sans eux la promesse est vide : un utilisateur de arrive sur une case à cocher et ne peut pas savoir si elle est cochée, ou sur un curseur et ne peut pas connaître sa valeur ou sa plage. Le contrôle est annoncé, peut recevoir le focus, et est impossible à utiliser.

Comment corriger

Ajoutez les attributs qu'exige le rôle et tenez-les à jour par script au fur et à mesure que l'état du contrôle change - un aria-checked="false" statique sur une case à cocher fonctionnelle est aussi trompeur que l'absence totale d'attribut.
Privilégiez les éléments natifs lorsqu'ils existent : <input type="checkbox"> et <input type="range"> exposent leur état automatiquement, sans ARIA à maintenir.

Comment Silktide teste ceci

Repérer chaque élément de la page qui déclare un attribut role.
Rechercher les attributs qu'ARIA 1.2 exige pour ce rôle - par exemple, role="checkbox" exige aria-checked, et role="slider" exige aria-valuenow.
Ignorer les cas où l'élément expose l'état nativement : une vraie case à cocher ou un bouton radio porte déjà son état coché, un <option> natif son état sélectionné, et un curseur avec aria-valuetext peut omettre aria-valuenow.
Signaler chaque élément auquel il manque un attribut obligatoire.

Dépannage

Un script définit l'attribut après le chargement de la page

Silktide teste la page pendant son chargement. Si votre composant n'ajoute ses attributs d'état qu'à la première interaction, les utilisateurs entendent un contrôle sans état jusque-là - rendez plutôt l'état initial dans la page.

Cette vérification ne signale rien même si je m'attends à des résultats

Les tests ARIA peuvent être désactivés pour chaque site Web. Consultez les paramètres avancés du site Web.