Framework JS

Audit d'accessibilité RGAA pour applications Vue.js

Pourquoi Vue.js pose des problèmes d'accessibilité

Vue.js est réputé pour sa simplicité et sa progressivité, mais les applications Vue présentent des problèmes d'accessibilité subtils que les développeurs ignorent souvent. Les transitions et animations Vue (transition, transition-group) modifient la visibilité des éléments d'une façon que les lecteurs d'écran interprètent mal : un élément en cours d'animation de sortie reste dans l'arbre d'accessibilité alors qu'il n'est plus pertinent. La directive v-if retire complètement les éléments du DOM, les supprimant de l'arbre d'accessibilité sans annonce — contrairement à v-show qui cache visuellement mais préserve l'élément. Vue Router effectue des navigations côté client sans annonce aux lecteurs d'écran. Les composants Vue communiquent via des events personnalisés ($emit) qui n'ont pas de correspondance dans les technologies d'assistance. Les slots et les composants dynamiques (<component :is>) rendent le HTML final imprévisible et difficile à auditer en amont. Le rendu conditionnel avec v-if, combiné aux transitions, crée des situations où le focus est perdu et le contenu disparaît de l'arbre d'accessibilité sans alternative.

Problèmes fréquents sur Vue.js

Transitions brisant le focus et l'arbre d'accessibilité

RGAA 7.3

Les composants transition et transition-group de Vue animent l'entrée et la sortie d'éléments. Pendant l'animation de sortie, l'élément est encore présent dans le DOM et l'arbre d'accessibilité, mais il n'est plus visuellement pertinent. Les lecteurs d'écran peuvent annoncer un contenu qui est en train de disparaître. À la fin de l'animation, l'élément est retiré du DOM, causant potentiellement une perte de focus si cet élément ou un de ses enfants avait le focus.

v-if retirant des éléments sans annonce

RGAA 7.4

La directive v-if supprime physiquement les éléments du DOM quand la condition est fausse. Les lecteurs d'écran ne sont pas notifiés de cette disparition. Si un message d'erreur, une notification ou un contenu important est géré par v-if, il apparaît et disparaît silencieusement pour les technologies d'assistance. Ce problème est absent avec v-show (qui utilise display:none) mais les développeurs préfèrent v-if pour des raisons de performance.

Vue Router sans gestion de focus ni annonce de page

RGAA 12.6

Vue Router change le contenu de la page sans rechargement du navigateur. Le focus clavier n'est pas déplacé vers le nouveau contenu. Le titre de la page n'est pas automatiquement mis à jour. Les lecteurs d'écran n'annoncent pas le changement de page. L'utilisateur non-voyant reste focalisé sur le lien dans la barre de navigation, sans savoir que le contenu principal a changé.

Composants UI sans sémantique HTML native

RGAA 7.1

Les librairies de composants Vue (Vuetify, Quasar, Element Plus, PrimeVue) construisent des interfaces complexes mais n'utilisent pas toujours les éléments HTML natifs. Les sélecteurs sont des div avec des listes déroulantes custom. Les onglets sont des div avec des click handlers. Les modales ne sont pas des dialog. Sans les rôles et attributs ARIA corrects, ces composants sont inutilisables pour les technologies d'assistance.

Testez votre site Vue.js

Découvrez les non-conformités RGAA de votre site Vue.js en 5 minutes. Gratuit, sans engagement.

Lancer l'audit gratuit

Ce que Scrutia détecte sur Vue.js

Scrutia exécute votre application Vue.js dans un navigateur réel et teste les interactions dynamiques incluant les transitions et le rendu conditionnel. Notre moteur détecte les pertes de focus causées par les transitions, les contenus gérés par v-if sans annonce, les navigations Vue Router sans gestion de focus et les composants UI sans ARIA. Nous simulons un parcours utilisateur complet au clavier en attendant la fin de chaque animation avant de vérifier l'état de l'arbre d'accessibilité. Les corrections sont fournies en syntaxe Vue (template + script) avec les directives et composables recommandés.

Questions fréquentes — Vue.js

Scrutia détecte-t-il les problèmes liés aux transitions Vue ?
Oui. Scrutia attend la fin des animations et vérifie l'état de l'arbre d'accessibilité et la position du focus après chaque transition. Nous détectons les pertes de focus, les éléments fantômes dans l'arbre d'accessibilité et les contenus qui disparaissent sans annonce aria-live.
Les corrections sont-elles compatibles avec Vue 3 et la Composition API ?
Oui. Les corrections sont fournies en syntaxe Vue 3 avec script setup et Composition API. Pour les projets encore en Options API, les corrections sont facilement transposables. Nous précisons les composables à créer (useAnnounce, useFocusReturn) et les attributs de template à ajouter.
Scrutia teste-t-il les composants Vuetify ou Quasar ?
Oui. Scrutia analyse le HTML rendu dans le navigateur, quel que soit le framework de composants utilisé. Si Vuetify, Quasar, Element Plus ou PrimeVue génèrent des composants avec des lacunes ARIA, elles seront détectées dans le contexte réel de votre application.

Auditer d'autres technologies

Framework JS

React

Framework JS

Next.js

Framework JS

Angular

Auditez votre site Vue.js maintenant

106 critères RGAA testés en 5 minutes. Score gratuit, rapport complet multi-pages avec corrections de code à partir de 149€.

Tester mon site Vue.js