Accessibilité RGAA avec Gatsby : le guide SSG React
Gatsby est un framework React de génération statique, historiquement leader mais qui a perdu du terrain face à Next.js. Il reste utilisé sur de nombreux sites en production pour sa maturité, son écosystème de plugins et GraphQL intégré. Ce guide couvre Gatsby 5, les patterns a11y liés à React, la gestion des images via gatsby-plugin-image, et les plugins d'audit recommandés.
Gatsby en 2026
Gatsby reste pertinent pour les blogs, sites marketing et documentations statiques. La plateforme a intégré historiquement l'accessibilité avec gatsby-plugin-catch-links et une gestion du focus après navigation par défaut. Mais les projets Gatsby vieillissent et les dépendances a11y doivent être régulièrement auditées.
200k+
Sites Gatsby actifs
2500+
Plugins officiels
Partielle
A11y gérée nativement
En Bref : L'essentiel à retenir
- Framework : Gatsby nécessite une attention particulière à la sémantique HTML.
- Point Critique : Gestion du focus lors de la navigation dynamique.
- Outil Recommandé : gatsby-plugin-catch-links.
- Critères RGAA clés : 1.1, 7.1, 8.2.
Erreurs Fréquentes avec Gatsby
Link Gatsby sans aria-label
Comme avec Next.js, les <Link> Gatsby avec seulement une icône manquent souvent d'aria-label.
<Link to="/search"><Search /></Link><Link to="/search" aria-label="Rechercher"><Search /></Link>GatsbyImage sans alt descriptif
Le composant GatsbyImage accepte un alt mais beaucoup de développeurs mettent le nom du fichier ou laissent vide.
Plugins React non maintenus
Gatsby utilise souvent des plugins React plus anciens (react-modal, react-slick) avec des problèmes d'accessibilité connus.
Pages générées avec templates inaccessibles
Les pages créées dynamiquement via createPages() héritent du layout racine. Si le layout est mal structuré, toutes les pages ont le même problème.
MDX components sans sémantique
Les blocs MDX (si utilisés) remplacent parfois h1 par un composant H1 styled qui ne rend pas vraiment du <h1>.
Bonnes Pratiques Gatsby
gatsby-plugin-catch-links
Assure que les Link Gatsby interceptent les clics, améliorant la performance et la gestion du focus.
Layout component unique
Créez un seul Layout component wrappant toutes les pages, avec main, nav, footer et skip link. Importé dans chaque page.
gatsby-plugin-react-helmet
Utilisez Helmet pour gérer le title unique par page. Attention, si vous êtes sur React 19, migrez vers react-helmet-async.
Auditer les plugins installés
Chaque plugin de package.json doit être vérifié : maintenu, audité a11y, sans dépendances obsolètes. Un projet Gatsby de 3+ ans nécessite souvent un nettoyage.
Migration planifiée
Si votre Gatsby date de plus de 3 ans, évaluez une migration vers Next.js ou Astro. Ces frameworks offrent aujourd'hui un meilleur écosystème a11y.
Critères RGAA clés pour Gatsby
Ces critères du référentiel RGAA sont particulièrement importants pour les sites Gatsby.
Alternatives textuelles
GatsbyImage avec alt obligatoire
Scripts
Hydratation React, gestion focus navigation
Titre
Helmet avec title unique par page
Landmarks
Layout component avec main, nav, footer
Lien d'évitement
Skip link dans Layout component
Checklist accessibilité Gatsby
Vérifiez ces points essentiels avant de mettre votre site Gatsby en production.
- Layout component unique avec landmarks
- Helmet ou HeadComponent avec title unique
- GatsbyImage avec alt descriptif
- Skip link présent
- Plugins React audités et à jour
- Focus visible en CSS global
- Pages dynamiques avec metadata
- MDX components rendant des balises sémantiques
- ESLint jsx-a11y configuré
- Tests avec @testing-library/react + jest-axe
Questions Fréquentes sur Gatsby et l'accessibilité
Gatsby est-il encore un bon choix pour l'accessibilité ?
Gatsby reste fonctionnel et permet de créer des sites accessibles, mais son écosystème vieillit. Pour un nouveau projet, Next.js ou Astro offrent souvent une meilleure base. Pour un projet existant, maintenez vos dépendances à jour.
Faut-il migrer un site Gatsby vers Next.js pour l'accessibilité ?
Pas forcément. Un site Gatsby bien maintenu avec des plugins à jour peut rester conforme RGAA. Envisagez la migration si votre projet n'évolue plus ou utilise des plugins obsolètes connus pour des problèmes d'accessibilité.
Comment gérer le focus dans Gatsby après navigation ?
Gatsby déplace par défaut le focus sur le body après navigation via @reach/router. Pour un focus explicite sur le contenu, ajoutez useEffect dans votre Layout qui fait focus() sur main après chaque location.pathname change.
Outils Recommandés pour Gatsby
gatsby-plugin-catch-links
Plugin officiel qui améliore la gestion des liens internes et la performance de navigation.
Guide React
Consultez notre guide complet sur l'accessibilité React, dont la plupart des principes s'appliquent à Gatsby.
Alternative Next.js
Voir notre guide Next.js pour comparer et planifier une éventuelle migration.
Scanner RGAA Checker
Auditez votre site Gatsby déployé contre les 106 critères RGAA 4.1.
Auditez votre site Gatsby gratuitement
Vérifiez si votre application respecte les 106 critères RGAA en moins de 30 secondes.
Lancer un audit RGAA gratuit