Accessibilité RGAA avec Vue : le guide de correction

Vue est léger et n'impose rien de particulier — c'est justement pourquoi l'accessibilité dépend entièrement de vos habitudes. Voici les corrections les plus rentables pour le RGAA sur une application Vue.

Sémantique et templates

Comme partout, privilégiez les éléments natifs. Attention à v-html qui peut injecter du contenu non contrôlé : vérifiez la sémantique et les alternatives des médias qu'il produit.

Actions → <button>, navigation → <router-link> avec intitulé clair.
Chaque champ relié à un <label>.
Images informatives : alt pertinent ; décoratives : alt vide.

Focus et Vue Router

À chaque navigation, replacez le focus sur le titre de la nouvelle vue via un hook afterEach du router, et envisagez une région aria-live pour annoncer le changement. Sans cela, l'utilisateur au clavier repart du haut du document, voire de nulle part.

Composants interactifs custom

Pour les menus, onglets et dialogues faits main, gérez le focus (piège + restauration), le clavier (flèches, Échap) et les états ARIA. Testez chaque composant uniquement au clavier avant de le considérer terminé.

Scannez une vue de votre app Vue

FAQ

Nuxt change-t-il quelque chose ?

Le SSR de Nuxt améliore le HTML initial, mais la gestion du focus côté client et la sémantique restent à votre charge.

Quel outillage en continu ?

Un scan sur le rendu réel de vos vues clés, branché en CI pour bloquer les régressions avant la production.