Accessibilité RGAA avec Nuxt : le guide Vue universel
Nuxt est le framework full-stack de l'écosystème Vue.js, basé sur Vite et Nitro. Ses spécificités (SSR/SSG/ISR, auto-imports, modules, useHead) impactent l'accessibilité de manière distincte de Vue pur. Ce guide couvre Nuxt 3 et la montée en puissance de Nuxt 4, avec les pièges propres au framework : gestion du focus après navigation, modules tiers, hydratation et structure des layouts.
Nuxt dans l'écosystème Vue français
Nuxt est particulièrement populaire en France et en Europe grâce à la communauté Vue.js active. De nombreuses agences web et PME utilisent Nuxt pour leurs sites vitrine, e-commerce et applications métier. Le framework offre une expérience développeur excellente mais demande de la vigilance sur l'accessibilité.
1M+
Sites Nuxt en production
200+
Modules Nuxt disponibles
Top 5 frameworks
Popularité en France
En Bref : L'essentiel à retenir
- Framework : Nuxt nécessite une attention particulière à la sémantique HTML.
- Point Critique : Gestion du focus lors de la navigation dynamique.
- Outil Recommandé : VueUse.
- Critères RGAA clés : 7.1, 8.2, 8.9.
Erreurs Fréquentes avec Nuxt
NuxtLink sans gestion du focus
Après un clic sur <NuxtLink>, le focus reste sur le lien cliqué. L'utilisateur clavier est perdu sur la nouvelle page.
useHead oublié sur pages dynamiques
Sur les pages dynamiques, useHead() n'est pas toujours appelé, laissant un titre par défaut identique entre pages.
<script setup>const { data } = await useFetch('/api/post')</script><script setup>const { data } = await useFetch('/api/post'); useHead({ title: data.value.title })</script>Auto-imports masquant la sémantique
Les composants auto-importés (UButton de @nuxt/ui) peuvent cacher leur rendu HTML. Vérifiez le DOM généré, pas juste le Vue template.
Transitions sans prefers-reduced-motion
Les <NuxtPage> avec page transitions activées ne respectent pas prefers-reduced-motion par défaut.
SSR hydration errors
Les erreurs d'hydratation Nuxt cassent parfois les attributs ARIA dynamiques, rendant les composants inaccessibles.
Packages à éviter
Ces packages sont connus pour causer des problèmes d'accessibilité. Évitez-les ou configurez-les correctement.
@nuxtjs/carousel (obsolète)
Navigation clavier défaillante
Alternative : Embla Carousel Vue ou suppression du carrousel
vue-final-modal (config défaut)
Focus trap à configurer manuellement
Alternative : Radix Vue Dialog
Modules tiers non maintenus
Problèmes ARIA persistants
Alternative : Audit chaque module dans la Nuxt Modules Gallery
Bonnes Pratiques Nuxt
layouts/default.vue structuré
Utilisez header, nav, main, footer dans le layout par défaut. C'est la base héritée par toutes vos pages.
useHead systématique
Dans chaque pages/*.vue, appelez useHead({ title: ... }) avec un titre unique. Pour les pages dynamiques, attendez les données avant d'appeler useHead.
Plugin focus-on-navigate
Créez un plugin Nuxt qui écoute le router hook afterEach et appelle nextTick + focus() sur #main-content pour déplacer le focus.
Composables a11y avec VueUse
VueUse fournit useFocusTrap, usePreferredReducedMotion et useScrollLock, parfaits pour les modales et interactions complexes.
@nuxtjs/a11y (si stable)
Surveillez l'écosystème Nuxt pour les modules a11y dédiés. En attendant, appliquez les bonnes pratiques manuellement dans votre app.vue.
Critères RGAA clés pour Nuxt
Ces critères du référentiel RGAA sont particulièrement importants pour les sites Nuxt.
Scripts
SSR Nuxt permet un rendu initial accessible sans JS
Titre de page
useHead sur chaque pages/*.vue
Landmarks
layouts/default.vue avec main, nav, footer
Focus visible
CSS global dans assets/css avec focus-visible
Navigation clavier
NuxtLink avec focus management après navigation
Checklist accessibilité Nuxt
Vérifiez ces points essentiels avant de mettre votre site Nuxt en production.
- layouts/default.vue avec landmarks
- useHead sur toutes les pages
- Plugin focus-on-navigate actif
- Skip link dans default layout
- NuxtLink avec texte ou aria-label
- Transitions respectant reduced-motion
- Modules Nuxt audités individuellement
- ESLint vuejs-accessibility configuré
- SSR sans erreurs d'hydratation
- Tests avec @vue/test-utils + axe-core
Questions Fréquentes sur Nuxt et l'accessibilité
Nuxt est-il accessible par défaut ?
Nuxt n'impose pas de règles d'accessibilité, mais fournit les outils pour bien faire : SSR, useHead, auto-imports. La responsabilité revient au développeur et au choix des modules.
Comment gérer le focus après navigation dans Nuxt ?
Créez un plugin Nuxt avec useRouter().afterEach((to, from) => nextTick(() => document.getElementById('main-content')?.focus())). N'oubliez pas tabindex="-1" sur <main>.
Quelle est la différence d'accessibilité entre Nuxt 3 et Nuxt 4 ?
Nuxt 4 apporte des améliorations de DX et performance mais les enjeux d'accessibilité restent similaires à Nuxt 3. Le SSR amélioré bénéficie indirectement à l'accessibilité (contenu initial plus rapide).
Outils Recommandés pour Nuxt
VueUse
Collection de composables Vue 3 incluant useFocusTrap et usePreferredReducedMotion, parfaits pour Nuxt.
Radix Vue
Composants headless accessibles compatibles Nuxt 3 via auto-imports.
Guide Vue.js
Consultez notre guide complet sur l'accessibilité Vue pour les fondamentaux applicables à Nuxt.
Scan RGAA Checker
Scannez votre application Nuxt déployée pour valider la conformité RGAA 4.1.
Auditez votre site Nuxt gratuitement
Vérifiez si votre application respecte les 106 critères RGAA en moins de 30 secondes.
Lancer un audit RGAA gratuit