Le problème
Une div avec role="checkbox" sans état, focus ni activation clavier annonce une fonction qu’elle ne remplit pas. Le contrôle natif évite de reconstruire ces mécanismes.
Exemple : mauvais et correct
Mauvais
<div role="checkbox">Recevoir les alertes</div>Correct
<label for="alertes">
<input id="alertes" name="alertes" type="checkbox">
Recevoir les alertes
</label>La case native fournit rôle, état coché et activation par Espace. label associe l’intitulé sans role supplémentaire.
RGAA concerné
Les critères dépendent de l’élément, de son usage et des cas particuliers applicables. Voici les contrôles à examiner pour ce sujet.
- Critère 7.1 — Exposer rôle, nom et états pertinents.
- Critère 7.3 — Implémenter les interactions clavier scriptées.
- Critère 11.1 — Étiqueter les contrôles de formulaire.
Impact utilisateur
Le lecteur d’écran adapte ses annonces au rôle. Un bouton sans activation ou une case sans état force la personne à découvrir un comportement imprévisible au lieu d’utiliser un contrôle connu.
Correction
- Choisissez le HTML adapté : input, button, a ou dialog selon la fonction. Évitez de remplacer leur rôle implicite sans raison.
- Pour un widget personnalisé, vérifiez propriétés requises et modèle clavier. checkbox demande notamment aria-checked, un accès au focus et une activation cohérente.
- Utilisez les rôles selon leur fonction, par exemple status pour un résultat. Vérifiez les règles HTML pour éviter les rôles contradictoires ou interdits.
Méthode de test
- Inspectez rôle, nom et états : ils doivent correspondre à la fonction réelle.
- Avec Tab puis Espace, cochez et décochez la case native. Vérifiez ces états au lecteur d’écran.
- Pour un widget personnalisé, testez touches et états attendus. Un contrôle automatique des attributs ne prouve pas le fonctionnement.
Points de vigilance
- presentation ou none retire certaines informations sémantiques sans masquer automatiquement texte et descendants.
- menu exige un modèle particulier ; ne l’ajoutez pas à une liste de liens par convention.
Sources officielles
Le RGAA fournit les critères de contrôle. Les ressources du W3C et du WHATWG complètent les méthodes de mise en œuvre ; elles ne remplacent pas les tests RGAA.