Accessibilité RGAA avec Jekyll : le guide SSG
Jekyll est le générateur de sites statiques le plus ancien, écrit en Ruby et utilisé historiquement pour GitHub Pages. Sa simplicité (templates Liquid, Markdown, layouts) en fait un choix privilégié pour les sites de documentation et les blogs techniques. Mais son écosystème minimaliste signifie que l'accessibilité est entièrement à la charge du développeur. Ce guide couvre la structuration des layouts, les bonnes pratiques d'includes et les thèmes Jekyll accessibles.
Jekyll et GitHub Pages
Jekyll reste le moteur officiel de GitHub Pages, même si des alternatives comme Hugo et Astro gagnent du terrain. Il est utilisé pour des sites techniques, des documentations open source et des blogs d'ingénieurs. Les sites générés sont du HTML pur, idéal pour l'accessibilité si bien structuré.
1M+
Sites Jekyll actifs
500k+
GitHub Pages hébergés
12
Thèmes officiels GitHub
En Bref : L'essentiel à retenir
- Framework : Jekyll nécessite une attention particulière à la sémantique HTML.
- Point Critique : Gestion du focus lors de la navigation dynamique.
- Outil Recommandé : just-the-docs.
- Critères RGAA clés : 8.3, 8.9, 9.1.
Erreurs Fréquentes avec Jekyll
Layout default sans landmarks
Beaucoup de thèmes Jekyll (dont minima, le défaut GitHub) n'utilisent pas <main>, <nav>, <footer>. Tout le contenu est dans <body> sans structure.
<body>{{ content }}</body><body><header><nav>...</nav></header><main>{{ content }}</main><footer>...</footer></body>Skip link absent
Les thèmes Jekyll n'incluent généralement pas de lien « Aller au contenu principal », essentiel pour les utilisateurs clavier.
Images Markdown sans alt
Dans Markdown, la syntaxe image  génère un alt vide, souvent oublié par les rédacteurs.
Tables sans en-têtes
Les tables Markdown générées par kramdown ne produisent pas toujours les <th scope> corrects pour les lecteurs d'écran.
Code blocks sans langue
Les blocs de code sans spécifier le langage n'ont pas d'annotation lang, réduisant la qualité des annonces pour les lecteurs d'écran techniques.
Bonnes Pratiques Jekyll
Choisir un thème accessible
Utilisez des thèmes auditées comme just-the-docs (documentation) ou partez d'un thème minimaliste que vous pouvez adapter manuellement.
Structurer le layout default
Dans _layouts/default.html, utilisez header, nav, main, footer avec leurs rôles landmarks. Ajoutez un skip link en début de body.
Include pour le skip link
Créez _includes/skip-link.html avec <a class="skip-link" href="#main">Aller au contenu</a> et incluez-le dans chaque layout.
Configurer lang par défaut
Dans _config.yml, définissez lang: fr-FR et utilisez <html lang="{{ site.lang }}"> dans default.html.
Automatiser avec jekyll-a11y-reports
Le plugin jekyll-a11y-reports permet de lancer des audits pa11y dans votre build CI GitHub Actions.
Critères RGAA clés pour Jekyll
Ces critères du référentiel RGAA sont particulièrement importants pour les sites Jekyll.
Langue par défaut
Configuré dans _config.yml et layout principal
Landmarks
Layouts Jekyll avec header, main, nav, footer
Titres
Front matter de chaque post avec title en H1 unique
Lien d'évitement
Include skip-link en début de body
Images
Contenus Markdown avec alt obligatoire
Checklist accessibilité Jekyll
Vérifiez ces points essentiels avant de mettre votre site Jekyll en production.
- Layout default.html avec header, main, nav, footer
- Skip link présent en début de body
- Attribut lang sur <html>
- Alt text présent sur toutes les images Markdown
- Hiérarchie H1 > H2 > H3 dans chaque post
- Focus visible dans le CSS
- Tables avec en-têtes scope
- Code blocks avec langue
- Thème de base audité ou personnalisé
- CI avec pa11y ou axe-cli
Questions Fréquentes sur Jekyll et l'accessibilité
Jekyll est-il adapté aux sites RGAA conformes ?
Oui, Jekyll génère du HTML pur. La conformité dépend entièrement de la structure des layouts et du CSS. Un site Jekyll bien fait peut atteindre 100% de conformité automatique aux critères techniques.
Quel thème Jekyll est accessible par défaut ?
just-the-docs pour la documentation et minima légèrement amélioré peuvent servir de base. Pour plus de garanties, créez votre propre thème à partir d'un audit RGAA réalisé tôt dans le projet.
Hugo ou Jekyll, lequel choisir pour l'accessibilité ?
Techniquement, les deux permettent d'atteindre la conformité. Hugo est plus rapide à builder et a un écosystème de thèmes plus récent, ce qui peut faciliter le choix d'un thème a11y-ready.
Outils Recommandés pour Jekyll
just-the-docs
Thème Jekyll pour documentation technique, avec une bonne base d'accessibilité.
jekyll-a11y-reports
Plugin Jekyll pour générer des rapports d'accessibilité via pa11y pendant le build.
Pa11y CI
Intégrez Pa11y dans vos GitHub Actions pour vérifier l'accessibilité à chaque push.
RGAA Checker
Scan complet de votre site Jekyll déployé, conforme RGAA 4.1.
Auditez votre site Jekyll gratuitement
Vérifiez si votre application respecte les 106 critères RGAA en moins de 30 secondes.
Lancer un audit RGAA gratuit