Attribut ARIA requis manquant

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

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

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

Pourquoi est-ce 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 nécessitent 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 ni sa plage. Le contrôle est annoncé, peut recevoir le focus et est impossible à utiliser.

Comment corriger le problème

Ajoutez les attributs requis par le rôle et maintenez-les à jour par script lorsque l'état du contrôle change : un aria-checked="false" statique sur une case à cocher fonctionnelle est tout aussi trompeur que son absence.
Préférez les éléments natifs lorsqu'ils existent : <input type="checkbox"> et <input type="range"> exposent leur état automatiquement, sans ARIA à maintenir.

Comment Silktide effectue cette vérification

Recherchez chaque élément de la page qui déclare un attribut role.
Consultez les attributs requis par ARIA 1.2 pour ce rôle ; par exemple, role="checkbox" nécessite aria-checked et role="slider" nécessite aria-valuenow.
Ignorez les cas où l'élément expose son état de manière native : une véritable case à cocher ou un véritable bouton radio porte déjà son état coché, un élément <option> natif porte son état sélectionné, et un curseur avec aria-valuetext peut omettre aria-valuenow.
Signalez chaque élément auquel il manque un attribut requis.

Résolution des problèmes

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

Silktide teste la page lors de son chargement. Si votre widget ajoute ses attributs d'état uniquement lors de la première interaction, les utilisateurs entendent un contrôle sans état jusque-là : affichez plutôt l'état initial dans la page.

Cette vérification ne signale rien alors que 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.