Accessibilité RGAA avec Next.js : le guide complet
Next.js est le framework React full-stack le plus utilisé, avec plus de 6 millions de sites en production. Ses spécificités (App Router, Server Components, next/image, next/font, streaming) impactent directement l'accessibilité : hydratation partielle, navigation SPA, metadata API, gestion des images. Ce guide détaille les pièges propres à Next.js 14, 15 et 16, et les patterns pour construire des applications conformes RGAA.
Next.js au cœur des applis modernes
Next.js domine le développement React moderne. La montée en puissance des Server Components change la donne pour l'accessibilité : le HTML initial est désormais pré-rendu côté serveur, ce qui bénéficie aux lecteurs d'écran. Mais certains patterns restent à maîtriser : navigation client, metadata dynamique, interactions post-hydratation.
6M+
Sites Next.js en production
80%+
Adoption App Router
35+
Critères RGAA impactés
En Bref : L'essentiel à retenir
- Framework : Next.js nécessite une attention particulière à la sémantique HTML.
- Point Critique : Gestion du focus lors de la navigation dynamique.
- Outil Recommandé : Next.js ESLint preset.
- Critères RGAA clés : 1.1, 7.1, 8.2.
Accessibilité selon les versions Next.js
| Version | Support | Fonctionnalités A11y |
|---|---|---|
| Next.js 14 | LTS |
|
| Next.js 15 | Stable |
|
| Next.js 16 | Latest |
|
Erreurs Fréquentes avec Next.js
Link sans texte accessible
Le composant Link de Next.js doit contenir un texte ou un aria-label. Les Link avec seulement une icône sans label sont invisibles aux lecteurs d'écran.
<Link href="/panier"><ShoppingCart /></Link><Link href="/panier" aria-label="Voir mon panier"><ShoppingCart /></Link>next/image alt manquant
Bien que TypeScript force l'attribut alt, beaucoup de développeurs mettent alt="" ou un nom de fichier sans réfléchir à la pertinence.
Focus perdu après navigation client
Lors d'un Link click, Next.js ne déplace pas le focus sur la nouvelle page, laissant l'utilisateur clavier « bloqué ».
Metadata statique sur pages dynamiques
Les generateMetadata oubliées créent des pages avec le même title, problématique pour les lecteurs d'écran et le SEO.
Server Components vs Client Components
Certains patterns accessibles (focus trap, useRef, live region) nécessitent "use client". Mélanger les deux sans attention crée des incohérences.
Loading.tsx sans annonce
Les états de loading du App Router ne sont pas annoncés aux lecteurs d'écran par défaut. Un role="status" est nécessaire.
<div>Chargement...</div><div role="status" aria-live="polite">Chargement...</div>Packages à éviter
Ces packages sont connus pour causer des problèmes d'accessibilité. Évitez-les ou configurez-les correctement.
next-themes (sans config ARIA)
Toggle de thème souvent rendu comme bouton sans aria-pressed
Alternative : Ajouter aria-pressed={isDark}
react-select < v5
Accessibilité limitée en version SSR
Alternative : react-select v5+ ou @radix-ui/react-select
Composants SSR-only sans fallback
Pas de rendu sans JS
Alternative : Progressive enhancement avec Server Components
Bonnes Pratiques Next.js
Déplacer le focus après navigation
Créez un composant FocusManager dans layout.tsx qui écoute usePathname() et déplace le focus sur <main> via focus() après chaque changement de route.
Metadata API pour les titres
Utilisez export const metadata ou generateMetadata dans chaque page.tsx. Chaque page doit avoir un title unique et descriptif.
next/image avec alt pertinent
Pour les images décoratives, utilisez alt="" explicitement. Pour les images informatives, décrivez leur contenu et fonction, pas juste le nom du fichier.
Live regions dans Server Components
Créez un composant Client "use client" avec aria-live qui reçoit les messages depuis un state ou URL search params pour annoncer les changements.
ESLint next/core-web-vitals
Le preset Next.js inclut jsx-a11y. Activez-le et traitez toutes les erreurs comme bloquantes dans votre CI.
Critères RGAA clés pour Next.js
Ces critères du référentiel RGAA sont particulièrement importants pour les sites Next.js.
Alternatives textuelles
next/image exige alt, mais qualité dépend du développeur
Scripts
Navigation App Router avec focus management manuel
Titre de page
Metadata API pour titre unique par route
Landmarks
layout.tsx avec main, nav, header, footer
Focus visible
Global CSS avec focus-visible bien configuré
Lien d'évitement
Skip link dans layout racine
Checklist accessibilité Next.js
Vérifiez ces points essentiels avant de mettre votre site Next.js en production.
- layout.tsx avec landmarks sémantiques
- Metadata API configurée par page
- Focus déplacé après navigation client
- next/image avec alt pertinent
- Loading.tsx avec role="status"
- Error.tsx annoncée via aria-live
- Skip link dans layout racine
- ESLint next/core-web-vitals zéro erreur
- Server Components privilégiés quand possible
- Tests jest-axe sur composants critiques
Questions Fréquentes sur Next.js et l'accessibilité
Next.js est-il plus accessible que React seul ?
Next.js facilite certains aspects : SSR/SSG pour le contenu initial, next/image qui exige alt, Metadata API pour les titres. Mais les problèmes de composants interactifs et la navigation client restent à gérer manuellement.
Comment déplacer le focus après navigation dans App Router ?
Créez un hook useFocusManager qui utilise usePathname() et useEffect pour appeler focus() sur <main> ou <h1> après chaque changement de route. Le focus doit aller sur un élément avec tabindex="-1".
Les Server Components sont-ils plus accessibles ?
Oui pour le contenu statique : le HTML est pré-rendu, lisible immédiatement par les lecteurs d'écran, sans dépendre de l'hydratation JS. Les interactions clavier et ARIA dynamiques nécessitent toujours des Client Components.
Next.js 16 apporte-t-il des améliorations a11y ?
Next.js 16 améliore les performances (Turbopack stable, Partial Prerendering) ce qui bénéficie indirectement à l'accessibilité (contenu disponible plus vite). Pas de feature a11y révolutionnaire, mais les fondations deviennent plus solides.
Outils Recommandés pour Next.js
Next.js ESLint preset
Configuration ESLint officielle incluant jsx-a11y pour détecter les erreurs dans vos composants React.
next/image docs
Documentation officielle sur l'utilisation accessible du composant Image avec alt, priority et sizes.
Guide React
Voir notre guide complet sur l'accessibilité avec React, applicable à Next.js.
Scanner RGAA Checker
Auditez votre application Next.js en production avec notre scanner conforme RGAA 4.1.
Auditez votre site Next.js gratuitement
Vérifiez si votre application respecte les 106 critères RGAA en moins de 30 secondes.
Lancer un audit RGAA gratuit