Le problème
Un résultat ajouté après clic peut échapper au lecteur d’écran. Le script peut aussi supprimer le focus ou désynchroniser un état : l’absence d’erreur JavaScript ne garantit pas l’accessibilité.
Exemple : mauvais et correct
Mauvais
<button id="ajouter" type="button">Ajouter un exemplaire</button>
<p id="resultat">0 exemplaire ajouté</p>
<script>
let nombre = 0;
document.querySelector("#ajouter").addEventListener("click", () => {
nombre += 1;
document.querySelector("#resultat").textContent = `${nombre} exemplaire(s) ajouté(s)`;
});
</script>Correct
<button id="ajouter" type="button">Ajouter un exemplaire</button>
<p id="resultat" role="status">0 exemplaire ajouté</p>
<script>
let nombre = 0;
document.querySelector("#ajouter").addEventListener("click", () => {
nombre += 1;
document.querySelector("#resultat").textContent = `${nombre} exemplaire(s) ajouté(s)`;
});
</script>La région de statut précède la mise à jour. Le compteur local peut être annoncé sans déplacer le focus, qui reste sur le bouton.
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 — Restituer noms, rôles et états.
- Critère 7.3 — Utiliser les interactions au clavier.
- Critère 7.4 — Contrôler les changements de contexte concernés.
- Critère 7.5 — Restituer les messages de statut.
- Critère 12.8 — Préserver l’ordre après les mises à jour.
Impact utilisateur
Une personne aveugle doit savoir si son action réussit. Au clavier, ajout de contenu, recherche ou validation doivent conserver un point de navigation stable.
Correction
- Gardez les commandes natives ; exposez les états des composants personnalisés. L’état annoncé d’un panneau doit suivre son affichage.
- Pour un résultat sans changement de contexte, utilisez une région adaptée : role="status" pour une confirmation ordinaire, alerte appropriée pour une erreur constituant un statut.
- Déplacez le focus seulement lorsque la transition le justifie. Contrôlez DOM, contenus cachés et parcours après les réponses asynchrones, y compris les échecs.
Méthode de test
- Activez au clavier : chaque fonction doit rester utilisable sans souris.
- Au lecteur d’écran, actualisez le compteur : le résultat doit être restitué sans déplacement du focus.
- Testez erreurs, chargement et actions répétées : états et messages doivent refléter la situation sans annonces contradictoires ni perte de repère.
Points de vigilance
- Fonctionner sans JavaScript est une stratégie possible, pas une obligation universelle du RGAA.
- aria-live ne remplace pas les rôles, noms et interactions du composant.
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.