← Toutes les règles

ARIA

Les valeurs des attributs ARIA doivent être valides

• Règle: aria-valid-attr-value
• Gravité: Critique
• Niveau WCAG A

Pourquoi c’est important

Un aria-labelledby pointant vers un id inexistant laisse l’élément sans aucun nom, et une valeur d’état invalide est traitée comme absente. Le balisage a l’air correct et ne fait rien.

Comment corriger

1. Vérifiez que chaque id référencé par aria-labelledby, aria-describedby ou aria-controls existe sur la page.
2. Utilisez exactement les valeurs autorisées : true, false, mixed, undefined.
3. Surveillez les id générés par composant : un id dupliqué ou recréé au rendu est la cause habituelle.

Dans le balisage

<input aria-labelledby="email-label">
<!-- no element with id="email-label" -->

<span id="email-label">Email</span>
<input aria-labelledby="email-label">

L’exigence sous-jacente

Cette règle est une manière d’échouer aux critères de succès WCAG 2.2 suivants. Le W3C, qui rédige la norme, explique chacun d’eux :

• 4.1.2 Nom, rôle et valeur (s’ouvre dans un nouvel onglet) — Niveau WCAG A

Pour aller plus loin

Deque University sur aria-valid-attr-value (s’ouvre dans un nouvel onglet)

Deque développe axe-core, le moteur open source utilisé par notre scanner. Sa page documente la règle telle que le moteur l’implémente.

Les contrôles automatiques trouvent les défaillances qu’un navigateur peut prouver. Ils ne peuvent pas juger si un sous-titrage est fidèle, si une alternative textuelle est utile, ni si une page s’utilise de bout en bout au clavier : cela demande une personne.