Attributs ARIA requis manquants

Un rôle ARIA sans ses attributs obligatoires est un composant à moitié décrit, que le lecteur d'écran restitue mal.

Qui est concerné

• Personnes aveugles ou malvoyantes utilisant des composants riches (cases, curseurs, onglets)

Pourquoi c'est important

Chaque rôle ARIA vient avec un contrat. Un role="checkbox" sans aria-checked, ou un role="slider" sans aria-valuenow, laisse l'utilisateur dans le flou sur l'état du composant. Le critère 4.1.2 (niveau A) impose d'exposer l'état d'un composant. Souvent, un élément HTML natif (input type="checkbox") évite tout ce risque.

Comment le tester vous-même

1. Pour chaque rôle ARIA personnalisé, vérifiez les attributs requis associés.
2. Demandez-vous d'abord si un élément HTML natif ne ferait pas le travail sans ARIA.

Comment corriger

Ajoutez les attributs ARIA obligatoires pour le rôle utilisé (ex. aria-checked sur un role="checkbox").

<div role="checkbox" tabindex="0">Recevoir la newsletter</div>

<!-- Le plus sûr : l'élément natif -->
<label><input type="checkbox" name="news"> Recevoir la newsletter</label>

<!-- Si ARIA est imposé, l'état est obligatoire -->
<div role="checkbox" tabindex="0" aria-checked="false">Recevoir la newsletter</div>

Critères de référence

Plainpied détecte ce défaut automatiquement et le localise page par page. La conformité totale combine détection automatique et vérifications humaines : voir notre méthode.