Framework JS

Audit d'accessibilite RGAA pour applications Vue.js

Pourquoi Vue.jspose des problemes d'accessibilite

Vue.js est repute pour sa simplicite et sa progressivite, mais les applications Vue presentent des problemes d'accessibilite subtils que les developpeurs ignorent souvent. Les transitions et animations Vue (transition, transition-group) modifient la visibilite des elements d'une facon que les lecteurs d'ecran interpretent mal : un element en cours d'animation de sortie reste dans l'arbre d'accessibilite alors qu'il n'est plus pertinent. La directive v-if retire completement les elements du DOM, les supprimant de l'arbre d'accessibilite sans annonce — contrairement a v-show qui cache visuellement mais preserve l'element. Vue Router effectue des navigations cote client sans annonce aux lecteurs d'ecran. Les composants Vue communiquent via des events personnalises ($emit) qui n'ont pas de correspondance dans les technologies d'assistance. Les slots et les composants dynamiques (<component :is>) rendent le HTML final imprevisible et difficile a auditer en amont. Le rendu conditionnel avec v-if, combine aux transitions, cree des situations ou le focus est perdu et le contenu disparait de l'arbre d'accessibilite sans alternative.

Problemes frequents sur Vue.js

Transitions brisant le focus et l'arbre d'accessibilite

RGAA 7.3

Les composants transition et transition-group de Vue animent l'entree et la sortie d'elements. Pendant l'animation de sortie, l'element est encore present dans le DOM et l'arbre d'accessibilite, mais il n'est plus visuellement pertinent. Les lecteurs d'ecran peuvent annoncer un contenu qui est en train de disparaitre. A la fin de l'animation, l'element est retire du DOM, causant potentiellement une perte de focus si cet element ou un de ses enfants avait le focus.

v-if retirant des elements sans annonce

RGAA 7.4

La directive v-if supprime physiquement les elements du DOM quand la condition est fausse. Les lecteurs d'ecran ne sont pas notifies de cette disparition. Si un message d'erreur, une notification ou un contenu important est gere par v-if, il apparait et disparait silencieusement pour les technologies d'assistance. Ce probleme est absent avec v-show (qui utilise display:none) mais les developpeurs preferent 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 deplace vers le nouveau contenu. Le titre de la page n'est pas automatiquement mis a jour. Les lecteurs d'ecran n'annoncent pas le changement de page. L'utilisateur non-voyant reste focalise sur le lien dans la barre de navigation, sans savoir que le contenu principal a change.

Composants UI sans semantique 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 elements HTML natifs. Les selecteurs sont des div avec des listes deroulantes custom. Les onglets sont des div avec des click handlers. Les modales ne sont pas des dialog. Sans les roles et attributs ARIA corrects, ces composants sont inutilisables pour les technologies d'assistance.

Testez votre site Vue.js

Decouvrez les non-conformites RGAA de votre site Vue.js en 5 minutes. Gratuit, sans engagement.

Lancer l'audit gratuit

Ce que Scrutia detecte sur Vue.js

Scrutia execute votre application Vue.js dans un navigateur reel et teste les interactions dynamiques incluant les transitions et le rendu conditionnel. Notre moteur detecte les pertes de focus causees par les transitions, les contenus geres 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 verifier l'etat de l'arbre d'accessibilite. Les corrections sont fournies en syntaxe Vue (template + script) avec les directives et composables recommandes.

Questions frequentes — Vue.js

Scrutia detecte-t-il les problemes lies aux transitions Vue ?
Oui. Scrutia attend la fin des animations et verifie l'etat de l'arbre d'accessibilite et la position du focus apres chaque transition. Nous detectons les pertes de focus, les elements fantomes dans l'arbre d'accessibilite 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 precisons les composables a creer (useAnnounce, useFocusReturn) et les attributs de template a 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 utilise. Si Vuetify, Quasar, Element Plus ou PrimeVue generent des composants avec des lacunes ARIA, elles seront detectees dans le contexte reel de votre application.

Auditez votre site Vue.js maintenant

106 criteres RGAA testes en 5 minutes. Score gratuit, rapport complet avec corrections de code a 49 euros.

Tester mon site Vue.js