Audit Accessibilité Vue.js : Guide RGAA 2026
Vue.js est le framework progressif préféré des développeurs pour sa simplicité et sa flexibilité. Avec Vue 3 et la Composition API, construire des applications accessibles est plus facile, à condition de suivre les bonnes pratiques. Ce guide couvre Vue 3, Nuxt 3 et les erreurs courantes à éviter.
Vue.js dans l'écosystème français
Vue.js est particulièrement populaire en France et en Europe, avec une forte adoption dans les PME et agences web. Le framework est apprécié pour sa courbe d'apprentissage douce, mais l'accessibilité reste souvent négligée. Nuxt 3 améliore la situation avec des modules dédiés.
Top 3
Popularité en France
1M+
Sites Nuxt en production
30+
Critères RGAA impactés
En Bref : L'essentiel à retenir
- Framework : Vue.js nécessite une attention particulière à la sémantique HTML.
- Point Critique : Gestion du focus lors de la navigation dynamique.
- Outil Recommandé : eslint-plugin-vuejs-accessibility.
- Critères RGAA clés : 7.1, 7.3, 10.7.
Accessibilité selon les versions Vue
| Version | Support | Fonctionnalités A11y |
|---|---|---|
| Vue 2 | Fin de vie |
|
| Vue 3 | Stable |
|
| Nuxt 3 | Recommandé |
|
Comment auditer un site Vue.js en 5 étapes
Suivez ce guide étape par étape pour réaliser un audit RGAA complet de votre application Vue.js.
Scanner automatique RGAA
Utilisez RGAA Checker sur votre application Vue/Nuxt déployée pour détecter les erreurs automatiquement.
Inspecter les templates
Vérifiez que les templates utilisent des éléments sémantiques et non des div avec @click partout.
Tester les transitions
Les composants Transition doivent respecter prefers-reduced-motion pour éviter les problèmes vestibulaires.
Valider la navigation
Dans une SPA Vue/Nuxt, le focus et le titre doivent changer à chaque navigation.
Audit lecteur d'écran
Testez avec NVDA ou VoiceOver, particulièrement les composants dynamiques et les formulaires.
Erreurs Fréquentes avec Vue.js
@click sur des éléments non-sémantiques
Comme pour React, utiliser @click sur une div est une erreur majeure d'accessibilité. L'élément n'est ni focusable ni annoncé correctement.
<div @click="submit">Envoyer</div><button @click="submit">Envoyer</button>Transitions sans prefers-reduced-motion
Les animations Vue <Transition> peuvent causer des vertiges ou nausées chez les personnes sensibles au mouvement.
<Transition name="slide">...</Transition>@media (prefers-reduced-motion: reduce) { .slide-enter-active { animation: none; } }Focus perdu au changement de route
Dans une SPA Vue Router ou Nuxt, le focus reste souvent sur le lien cliqué au lieu d'aller sur le nouveau contenu.
v-html sans sanitization
v-html peut injecter du contenu inaccessible (images sans alt, liens sans texte) depuis un CMS ou une API.
Composables sans gestion du focus
Les composables Vue 3 (useModal, useDropdown) oublient souvent la gestion du focus et du clavier.
Packages à éviter
Ces packages sont connus pour causer des problèmes d'accessibilité. Évitez-les ou configurez-les correctement.
vue-carousel (obsolète)
Navigation clavier défaillante, pas maintenu pour Vue 3
Alternative : Embla Carousel Vue ou Swiper
v-tooltip (anciennes versions)
Tooltips non accessibles au clavier et aux lecteurs d'écran
Alternative : Floating Vue avec config a11y
vue-select (v3)
Combobox avec accessibilité limitée
Alternative : Headless UI Vue ou Radix Vue
Bonnes Pratiques Vue.js
Utiliser Nuxt pour le SSR
Le rendu côté serveur améliore l'accessibilité initiale et permet aux lecteurs d'écran de lire le contenu avant l'hydratation JavaScript.
Binding ARIA dynamique
Utilisez :aria-expanded="isOpen" et :aria-pressed="isActive" pour synchroniser l'état des composants avec leurs attributs ARIA.
Skip Links avec Nuxt
Ajoutez un lien "Aller au contenu principal" dans votre layout, visible au focus, pour permettre aux utilisateurs clavier de sauter la navigation.
Teleport pour les modales
Utilisez <Teleport to="body"> pour les modales afin de les sortir du flux DOM et faciliter la gestion du focus trap.
useHead() pour les titres dynamiques
Avec Nuxt 3, utilisez useHead() dans chaque page pour définir un titre unique et descriptif.
Critères RGAA clés pour Vue.js
Ces critères du référentiel RGAA sont particulièrement importants pour les sites Vue.js.
Scripts
Les composants Vue doivent fonctionner sans JavaScript si possible (SSR)
Composants interactifs
Chaque composant @click doit être utilisable au clavier
Focus visible
Les styles Scoped ne doivent pas masquer le focus
Navigation clavier
Vue Router doit gérer le focus après navigation
Animations
Respecter prefers-reduced-motion dans les Transitions
Checklist accessibilité Vue.js
Vérifiez ces points essentiels avant de mettre votre site Vue.js en production.
- Tous les @click sont sur des éléments focusables natifs
- Les transitions respectent prefers-reduced-motion
- useHead() définit un titre unique par page
- Les modales utilisent Teleport et trap le focus
- Les bindings :aria-* reflètent l'état des composants
- Skip link présent et fonctionnel
- eslint-plugin-vuejs-accessibility configuré
- Tests avec @vue/test-utils + axe-core
Questions Fréquentes sur Vue.js et l'accessibilité
Comment auditer l'accessibilité d'une application Vue.js ?
Scannez votre app avec RGAA Checker, puis testez manuellement la navigation clavier et avec un lecteur d'écran. Intégrez eslint-plugin-vuejs-accessibility dans votre projet pour prévenir les régressions.
Vue 3 est-il plus accessible que Vue 2 ?
Vue 3 facilite l'accessibilité avec Teleport (pour les modales), les Fragments (moins de div inutiles) et la Composition API (composables réutilisables). Mais l'accessibilité reste la responsabilité du développeur.
Nuxt améliore-t-il l'accessibilité de Vue ?
Oui. Le SSR de Nuxt permet aux lecteurs d'écran de lire le contenu avant l'hydratation. useHead() facilite les titres dynamiques. Des modules comme @nuxtjs/a11y ajoutent des vérifications automatiques.
Comment gérer le focus après navigation dans Vue Router ?
Écoutez l'événement afterEach de Vue Router et utilisez nextTick + focus() pour déplacer le focus sur le h1 ou un élément avec tabindex="-1" dans le nouveau contenu.
Quelle librairie de composants Vue est accessible ?
Headless UI Vue et Radix Vue sont les références pour les composants accessibles. PrimeVue a aussi fait des progrès significatifs en accessibilité.
Outils Recommandés pour Vue.js
eslint-plugin-vuejs-accessibility
Plugin ESLint pour détecter les erreurs d'accessibilité dans les templates Vue.
Headless UI Vue
Composants headless accessibles par défaut : Menu, Dialog, Listbox, etc. Par les créateurs de Tailwind.
Radix Vue
Port Vue des composants Radix UI, avec accessibilité complète et personnalisation CSS.
VueUse
Collection de composables incluant useFocusTrap, usePreferredReducedMotion et autres utilitaires a11y.
Auditez votre site Vue.js gratuitement
Vérifiez si votre application respecte les 106 critères RGAA en moins de 30 secondes.
Lancer un audit RGAA gratuit