Valeur d’attribut ARIA invalide
Silktide vérifie la valeur de chaque attribut ARIA sur vos pages par rapport aux valeurs autorisées par la norme. Un attribut dont la valeur est erronée, comme un état de case à cocher « yes » plutôt que « true », est ignoré par les navigateurs, de sorte que l’état qu’il décrit n’est jamais annoncé.
<!-- Problème : « yes » n’est pas une valeur valide; l’état est ignoré -->
<div role="checkbox" aria-checked="yes">S’abonner</div>
<!-- Correction : utiliser le jeton défini -->
<div role="checkbox" aria-checked="true">S’abonner</div>
Pourquoi c’est important
Chaque attribut définit exactement les valeurs qu’il accepte,
et les navigateurs rejettent tout le reste plutôt que de deviner. Les erreurs
sont généralement des valeurs qui paraissent intuitives — aria-expanded=\"1\",
aria-checked=\"yes\", aria-level=\"0\" — et qui passent tous les tests visuels,
tandis que les utilisateurs de
reçoivent un contrôle sans état annoncé : un menu qui n’indique jamais s’il est
ouvert, une case à cocher qui n’indique jamais si elle est cochée.
Comment corriger
- Remplacez les valeurs non standard par les jetons définis par l’attribut : « true » et « false » plutôt que « yes », « no », « 1 » ou « 0 ».
- Vérifiez les attributs numériques : les attributs de comptage comme
aria-leveletaria-rowindexcommencent à 1, pas à 0. - Supprimez les attributs laissés vides, comme
aria-checked=\"\": s’il n’y a aucun état à communiquer, l’attribut ne doit pas être présent.
Les valeurs exactes autorisées par chaque attribut sont répertoriées dans la référence des attributs ARIA de MDN.
Comment Silktide teste cela
- Repérer chaque élément de la page qui porte au moins un attribut
aria-. - Comparer la valeur de chaque attribut au type que définit ARIA 1.2 pour lui :
attributs booléens (true/false), attributs à trois états comme
aria-checked(true,false,mixed), nombres et entiers, et attributs à liste de mots fixe commearia-liveetaria-current. - Signaler chaque valeur non conforme, en précisant ce qui était attendu.
Les attributs qui référencent des ID d’élément sont testés par leurs propres
vérifications, comme ID aria-controls manquant, et les
attributs en texte libre comme aria-label acceptent n’importe quel texte.
Dépannage
La valeur est définie par un cadriciel
Les bibliothèques de composants sérialisent parfois les états de manière
incorrecte (par exemple, en rendant aria-expanded=\"undefined\"). Le constat
vise l’élément, mais la correction se fait généralement dans la configuration
du composant ou via une mise à jour de la bibliothèque.
Cette vérification ne signale rien alors que je m’attends à des constats
Les tests ARIA peuvent être désactivés par site Web. Vérifiez les paramètres avancés du site Web.