Audit accessibilité Vue.js : RGAA 4.1.2 en 30 secondes
Vue 3 et Nuxt 3 fournissent une bonne base technique, mais aucune application Vue n'est accessible par défaut. Les règles du RGAA 4.1.2 restent les mêmes : sémantique HTML, ARIA, gestion du focus, annonces de route. Ce guide couvre les bibliothèques, l'outillage et les patterns à appliquer.
Vue.js, Nuxt et accessibilité en 2026
Vue 3 et Nuxt 3 fournissent une bonne base technique, mais aucune application Vue n'est accessible par défaut. Les règles du RGAA 4.1.2 restent les mêmes : sémantique HTML, ARIA, gestion du focus, annonces de route. Le guide officiel Vue documente skip link, landmarks et focus, mais ne couvre pas les 106 critères. La différence se fait sur les bibliothèques utilisées (Reka UI très active en 2026), l'outillage de lint et de tests, et la rigueur des développeurs sur les éléments natifs.
590 000+
Reka UI : téléchargements/sem
~6 100
Reka UI : étoiles GitHub
106
Critères RGAA 4.1.2
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é : Reka UI.
- Critères RGAA clés : 7.1, 7.3, 8.9.
Versions Vue et Nuxt
| Version | Support | Fonctionnalités A11y |
|---|---|---|
| Vue 2 | Fin de vie |
|
| Vue 3 | Stable |
|
| Nuxt 3 | Recommandé |
|
Comment auditer un site Vue.js en 7 étapes
Suivez ce guide étape par étape pour réaliser un audit RGAA complet de votre application Vue.js.
Configurer l'ESLint
Activez eslint-plugin-vuejs-accessibility en CI pour bloquer les nouvelles violations dans les templates Vue. Note : la maintenance humaine du plugin est limitée en 2026, surveillez la compatibilité ESLint v10.
Brancher vue-axe en dev
Installez vue-axe et activez-le en environnement de développement pour voir les violations dans la console au fil de l'eau.
Lancer un scan RGAA Checker
L'audit sur les pages rendues identifie les erreurs détectables sur le DOM final, après hydratation et fetch.
Tester la navigation clavier
Sur chaque page critique, naviguez sans souris. Vérifiez le focus visible, l'ordre logique, le piégeage dans les modales.
Vérifier les annonces SPA
Sur Nuxt 3, vérifiez que le Route Announcer fonctionne (titre de page bien défini via useSeoMeta). Sur Vue Router seul, implémentez l'annonce manuellement.
Tester avec un lecteur d'écran
NVDA + Firefox ou VoiceOver + Safari. Parcourez l'application sur trois scénarios utilisateur clés.
Documenter et publier la déclaration
Listez les non-conformités dans la grille RGAA. Publiez la déclaration d'accessibilité conformément au modèle DINUM.
Erreurs Fréquentes avec Vue.js
Composant interactif rendu dans une <div @click>
Le <div> avec @click n'est pas focalisable au clavier ni annoncé comme bouton (RGAA 7.1). Vue ne change pas les règles HTML.
<div @click="submit">Envoyer</div><button type="button" @click="submit">Envoyer</button>v-if qui détruit un élément focalisé
Quand v-if détruit puis recrée un composant, le focus est perdu et reset au <body>. Privilégiez v-show si l'élément doit rester focalisable, ou gérez explicitement le focus après le rendu.
Transition Vue qui anime sans préserver le focus
Le composant <Transition> peut animer un élément focalisable. Pendant la transition, le focus saute. Utilisez nextTick() pour replacer le focus après la fin de l'animation.
Slot par défaut utilisé pour le label d'un bouton icône
Si un composant <IconButton> n'a qu'une icône SVG dans son slot, il manque un label accessible. Ajoutez aria-label en prop ou un span sr-only.
Composants Vuetify ou PrimeVue mal configurés
Certains composants (date picker, autocomplete, data-table) demandent une configuration explicite pour rester accessibles : labels, aria-expanded, annonces de changement.
definePageMeta sans useSeoMeta dans Nuxt 3
Le Route Announcer Nuxt s'appuie sur le titre de page. Si vous utilisez seulement definePageMeta({ title: ... }) sans useSeoMeta ou useHead, l'annonce peut être incorrecte.
Packages à éviter
Ces packages sont connus pour causer des problèmes d'accessibilité. Évitez-les ou configurez-les correctement.
eslint-plugin-vuejs-accessibility (sans surveillance)
Maintenance humaine très limitée en 2026 (issue ouverte sur le repo). Reste utile pour attraper les erreurs courantes mais peut ne pas couvrir les patterns Vue 3.5+ et ESLint v10.
Alternative : À combiner avec vue-axe en dev et tests manuels
Composants Vuetify utilisés sans validation
Vuetify documente l'accessibilité mais le niveau varie. Sans audit composant par composant, vous accumulez de la dette.
Alternative : Reka UI ou Nuxt UI pour les nouveaux projets, audit a11y composant par composant si Vuetify déjà en place
Modales codées à la main sans focus-trap
Une modale custom sans piégeage laisse fuir le clavier vers la page sous-jacente.
Alternative : Reka UI Dialog, Headless UI Vue Dialog ou focus-trap (vanilla)
Bonnes Pratiques Vue.js
Reka UI pour les composants composés
Reka UI (anciennement Radix Vue) est très active en 2026 : ~6 100 stars GitHub, plus de 590 000 téléchargements npm hebdomadaires, mises à jour régulières. Recommandée pour combobox, listbox, dialog, menu.
Nuxt UI pour démarrer rapidement
Nuxt UI s'appuie sur Reka UI + Tailwind, maintenue par l'équipe Nuxt. Bon point de départ pour un projet Nuxt 3 avec accessibilité raisonnable d'emblée.
Profiter du Route Announcer Nuxt 3
Nuxt 3 ship une live region aria-live="assertive" qui annonce le titre de la nouvelle page après navigation. Définissez useSeoMeta({ title }) ou useHead({ title }) sur chaque page.
vue-axe en développement
Injection d'axe-core dans une app Vue en dev. Les violations remontent dans la console : alt manquant, rôle ARIA invalide, contraste insuffisant.
Tests vitest-axe sur composants
expect(await axe(html)).toHaveNoViolations() sur chaque composant unitaire. Storybook + addon-a11y pour la bibliothèque de composants.
Sémantique HTML dans les templates
Un <button> ou un <a> selon l'intention, jamais un <div @click>. Slots et composition API n'enlèvent pas cette règle.
Gestion du focus avec template ref
Au changement de route ou après une action (formulaire envoyé, modale ouverte), déplacez le focus sur le <h1> ou un wrapper main via un ref Vue et focus().
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.
Compatibilité technologies d'assistance
Composants Vue (boutons, liens, modales) doivent utiliser des éléments natifs ou exposer des rôles ARIA corrects.
Composants interactifs au clavier
Slots et composition API ne dispensent pas du clavier : Tab, Entrée, Échap, flèches selon le composant.
Landmarks ARIA
default.vue layout doit exposer header, nav, main, footer, un seul main par page.
Focus visible
Transition et v-if à surveiller pour ne pas perdre le focus pendant les animations.
Étiquettes de formulaire
Vee-Validate, Formkit, Vuelidate : label for lié à id, jamais le placeholder seul.
Liens d'évitement
Skip link en début de layout, focus géré sur main au déclenchement.
Changement de contexte
Annonces de route via Route Announcer Nuxt ou injection manuelle dans Vue Router.
Checklist accessibilité Vue.js
Vérifiez ces points essentiels avant de mettre votre site Vue.js en production.
- Aucune <div @click> pour une action (button) ou navigation (a)
- eslint-plugin-vuejs-accessibility actif en CI (avec conscience de la maintenance limitée)
- vue-axe activé en environnement de développement
- Composants composés (combobox, dialog, menu) issus de Reka UI ou Headless UI Vue
- Modales avec focus trap et restauration à la fermeture
- Nuxt 3 : useSeoMeta({ title }) défini sur chaque page
- Route Announcer Nuxt 3 testé avec NVDA
- Vue Router seul : annonce manuelle implémentée (live region ou focus h1)
- Tests vitest-axe sur les composants critiques
- Slots de boutons icône : aria-label ou span sr-only fourni
- Transition / v-if : focus restauré après animation ou recréation
- Déclaration d'accessibilité publiée selon modèle DINUM
Questions Fréquentes sur Vue.js et l'accessibilité
Vue.js est-il accessible par défaut ?
Non. Vue est un framework UI. L'accessibilité dépend du HTML que vos templates produisent. Le guide officiel Vue couvre les bases (skip link, focus, ARIA), mais pas les 106 critères du RGAA 4.1.2.
Reka UI est-il maintenu ?
Oui. Reka UI (anciennement Radix Vue) est très actif en 2026, avec environ 6 100 stars GitHub et plus de 590 000 téléchargements npm hebdomadaires. C'est la bibliothèque headless de référence pour Vue.
eslint-plugin-vuejs-accessibility est-il toujours utile ?
Oui, mais avec prudence. Les bots font tourner les dépendances mais l'activité humaine est faible (issue #1454 ouverte sur le sujet). Surveillez les incompatibilités avec ESLint v10 et n'attendez pas qu'il détecte les nouveautés Vue 3.5+.
Nuxt 3 annonce-t-il les changements de page ?
Oui. Nuxt 3 ship un Route Announcer qui ajoute une live region aria-live="assertive" automatiquement. Définissez correctement le titre de chaque page via useSeoMeta ou useHead pour que l'annonce soit pertinente.
Vuetify est-il accessible ?
Vuetify documente l'accessibilité de chaque composant mais le niveau varie. Validez au cas par cas, en particulier sur les composants composés (data-table, autocomplete, navigation drawer).
Comment annoncer un changement de route en Vue Router seul ?
Watch sur $route.path, déplacement du focus sur le <h1> au montage, ou injection du titre dans une live region. Le guide officiel Vue détaille la méthode.
Quelle est la différence entre RGAA et WCAG pour une app Vue ?
WCAG est le référentiel international (W3C). RGAA 4.1.2 est sa transposition française avec 106 critères en 13 thématiques et une méthodologie de test détaillée. Pour une app Vue, viser RGAA AA couvre l'essentiel des exigences WCAG 2.1 AA.
Outils Recommandés pour Vue.js
Reka UI
Composants headless WAI-ARIA pour Vue, port officiel de Radix. ~6 100 stars GitHub, 590 000+ téléchargements npm hebdomadaires en 2026, très actif.
Nuxt UI
Bibliothèque UI prête à l'emploi basée sur Reka UI + Tailwind. Maintenue par l'équipe Nuxt. Démarrage rapide pour un projet Nuxt 3 accessible.
Headless UI Vue
Port Vue de Headless UI (Tailwind Labs). Composants headless accessibles, intégration naturelle avec Tailwind CSS.
vue-axe
Injecte axe-core en développement Vue 3. Affiche les violations a11y dans la console au fil de l'eau.
eslint-plugin-vuejs-accessibility
Règles statiques pour les templates Vue. Maintenance humaine limitée en 2026 (cf. issue #1454), à utiliser avec vigilance et en complément.
Nuxt Route Announcer
Composant Nuxt 3 intégré qui annonce le changement de route via aria-live="assertive". Documentation officielle Nuxt.
Guide officiel Vue.js sur l'accessibilité
Documentation officielle : skip link, landmarks, focus management dans les changements de route, attributs ARIA.
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