React, Vue, Angular : focus, routage et annonces dynamiques
Cette page fait partie de La mise en conformité RGAA.
Trois problèmes propres aux applications monopages
Les frameworks modernes ne produisent pas de non-conformités particulières sur le contenu statique. Ce qu’ils introduisent, ce sont trois catégories de problèmes qu’un site classique n’a pas — et qu’aucun outil automatique ne détecte correctement.
1. Le focus au changement de vue
Dans un site classique, changer de page réinitialise le focus et le lecteur d’écran annonce le nouveau titre. Dans une application monopage, rien de tout cela ne se produit : l’URL change, le contenu est remplacé, et le focus reste où il était — souvent sur un lien qui n’existe plus.
Correction : à chaque navigation, déplacer le focus sur le conteneur principal ou sur le titre de la nouvelle vue, et mettre à jour le titre du document. Sans cela, l’utilisateur ne sait pas que la page a changé.
2. Les annonces de contenu dynamique
Résultats filtrés, ajout au panier, message de confirmation, erreur de validation : tout changement de contenu qui ne suit pas une navigation doit être annoncé. Visuellement, il saute aux yeux ; en restitution vocale, il n’existe pas.
Correction : une zone de message de statut, présente dans le document dès le chargement, dans laquelle on injecte le texte. Insérer la zone en même temps que le message ne produit aucune annonce.
3. Les composants personnalisés
Menu déroulant, onglets, fenêtre modale, sélecteur de date reconstruits à la main. Chacun doit reproduire un comportement clavier attendu — flèches, échappement, retour du focus — que l’élément natif fournissait gratuitement.
La première règle d’ARIA est de ne pas s’en servir. Un
<button> natif fait déjà ce qu’un
<div role="button"> tente de réimplémenter, et il le
fait correctement partout. Chaque composant réécrit est une dette de
conformité à maintenir.
Le rendu côté serveur n’est pas qu’une question de performance
Le RGAA impose que le contenu reste disponible sans exécution de script. Une application entièrement rendue côté client échoue à ce test — et se prive au passage d’être lue correctement par les moteurs de réponse, comme expliqué sur accessibilité et moteurs de réponse.
Ce qui se met en place une fois
- un composant de navigation qui gère le focus et le titre du document à chaque changement de vue ;
- une zone d’annonce unique, alimentée par toute l’application ;
- une bibliothèque de composants accessibles, auditée une fois et réutilisée partout ;
- des contrôles automatisés en intégration continue, qui attrapent les régressions structurelles à chaque livraison.
Ces quatre chantiers couvrent l’essentiel. Le reste relève des mêmes règles que n’importe quel site.