Inclusible

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 title du 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-live dimensionnée pour ne pas être bavarde ;
  • Utiliser les éléments natifs : button, a, input apportent gratuitement le clavier, le focus et le rôle. Les recréer en div avec 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