Technique
Accessibilité des applications React : les pièges des SPA
Changement de route sans rechargement, focus perdu, contenus dynamiques muets : les défauts d'accessibilité propres aux applications monopages, et comment les corriger.
Le problème structurel des SPA
Dans une application monopage, la navigation ne recharge pas la page. Pour un lecteur d'écran, rien ne s'est passé : pas de nouveau titre annoncé, pas de focus réinitialisé. L'utilisateur reste sur un contenu qui a disparu. C'est le défaut le plus caractéristique — et le plus souvent ignoré — des applications React, Vue ou Angular.
Les quatre corrections essentielles
- Annoncer le changement de route : mettre à jour le
titledu document et déplacer le focus sur le titre principal de la nouvelle vue ; - Gérer le focus des modales : le piéger volontairement à l'intérieur tant qu'elle est ouverte, et le restituer à l'élément déclencheur à la fermeture ;
- Annoncer les contenus dynamiques : chargements, résultats filtrés, notifications de succès — via une région
aria-livedimensionnée pour ne pas être bavarde ; - Utiliser les éléments natifs :
button,a,inputapportent gratuitement le clavier, le focus et le rôle. Les recréer endivavec des attributs ARIA reproduit au mieux ce que le navigateur offre déjà.
> La première règle d'ARIA — Ne pas utiliser ARIA. Un role="button" sur un div exige d'implémenter à la main le focus, la touche Entrée, la barre d'espace et l'état désactivé. Un button fait tout cela sans une ligne de code.
Le rendu et l'audit
Une application rendue côté client n'expose son contenu qu'après exécution du JavaScript. Un audit crédible doit donc analyser le DOM final, après hydratation — ce qu'un outil qui se contente du HTML servi ne voit pas. C'est une contrainte technique de l'outillage, pas un détail méthodologique.
Tester en continu
Des vérifications automatisées dans les tests de composants attrapent les régressions les plus mécaniques. Elles ne remplacent pas l'audit, mais évitent de le repasser entièrement à chaque livraison.
---
À lire aussi