Valeur d’attribut ARIA invalide

Silktide vérifie la valeur de chaque attribut ARIA sur vos pages par rapport aux valeurs que la norme autorise pour celui-ci. Un attribut avec une valeur erronée, comme un état de case à cocher "yes" au lieu de "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 : utilisez le jeton défini -->
<div role="checkbox" aria-checked="true">S’abonner</div>

Pourquoi c’est important

Chaque attribut définit exactement quelles valeurs il accepte, et les navigateurs rejettent toute autre valeur 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" - qui passent tous les tests visuels tandis que les utilisateurs de obtiennent 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 le corriger

Remplacez les valeurs informelles 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 tels que aria-level et aria-rowindex commencent à 1, pas à 0.
Supprimez les attributs laissés vides, tels que aria-checked="" - s’il n’y a aucun état à transmettre, 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 sur MDN.

Comment Silktide teste ceci

Repérer chaque élément de la page qui porte au moins un attribut commençant par aria-.
Comparer la valeur de chaque attribut au type défini par ARIA 1.2 pour celui-ci : attributs true/false, attributs à trois états tels que aria-checked (true, false, mixed), nombres et entiers, et attributs avec des listes de mots fixes comme aria-live et aria-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 framework

Les bibliothèques de composants sérialisent parfois les états de façon incorrecte (par exemple, rendant aria-expanded="undefined"). Le signalement pointe vers 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 signalements

Les tests ARIA peuvent être désactivés pour un site. Vérifiez les paramètres avancés du site.