Accessibilité RGAA avec Hugo : le guide SSG
Hugo est le générateur de sites statiques écrit en Go, réputé pour sa vitesse de build fulgurante. Utilisé par de nombreux sites techniques, documentations et blogs, il génère un HTML que le développeur contrôle entièrement via ses templates Go. La conformité RGAA dépend donc principalement du thème et des shortcodes utilisés. Ce guide couvre les bonnes pratiques Hugo : structuration des layouts, gestion du multilingue, shortcodes accessibles et thèmes recommandés.
Hugo, le SSG le plus rapide
Hugo peut générer des sites de plusieurs milliers de pages en quelques secondes. Son écosystème de thèmes contient plus de 400 options dont certaines auditées a11y. La plateforme est particulièrement appréciée pour les sites de documentation technique, les blogs d'entreprises et les landing pages.
1ms/page
Build speed
400+
Thèmes Hugo disponibles
1.5M+
Sites Hugo actifs
En Bref : L'essentiel à retenir
- Framework : Hugo nécessite une attention particulière à la sémantique HTML.
- Point Critique : Gestion du focus lors de la navigation dynamique.
- Outil Recommandé : Hugo Docsy Theme.
- Critères RGAA clés : 8.3, 8.9, 9.1.
Erreurs Fréquentes avec Hugo
Thèmes tiers non audités
Le Hugo Themes Gallery contient des thèmes très variés en qualité. Beaucoup ont des problèmes : pas de lang, pas de landmarks, pas de skip link.
Shortcodes sans alt
Les shortcodes figure, image ou youtube générés par des thèmes tiers oublient parfois l'attribut alt ou title.
{{< figure src="/img.jpg" >}}{{< figure src="/img.jpg" alt="Description pertinente" >}}Multilingue mal configuré
Les sites Hugo multilingues utilisent parfois un seul layout sans changer l'attribut lang selon la langue courante.
Menus imbriqués inaccessibles
Les navigations à plusieurs niveaux générées par config.toml sont souvent des listes imbriquées sans gestion clavier ni aria-expanded.
Table des matières sans nav
Les TOC générées par .TableOfContents sont souvent placées dans une div sans rôle navigation ni titre associé.
Bonnes Pratiques Hugo
Layout baseof.html structuré
Dans _default/baseof.html, utilisez header, nav, main, footer avec leurs landmarks. C'est le layout hérité par toutes les pages.
Gérer l'attribut lang dynamiquement
Utilisez <html lang="{{ .Site.Language.Lang }}"> pour que la langue suive le multilingue configuré.
Créer un partial skip-link.html
Dans layouts/partials/skip-link.html, créez un lien vers #main visible au focus avec du CSS dédié.
Auditer les shortcodes customs
Chaque shortcode créé (figure, gallery, video) doit avoir des paramètres alt, caption et être testé en rendu.
CI avec axe-cli
Dans votre workflow GitHub Actions, après hugo build, lancez axe-cli sur le dossier public pour détecter les régressions.
Critères RGAA clés pour Hugo
Ces critères du référentiel RGAA sont particulièrement importants pour les sites Hugo.
Langue par défaut
Attribut lang dynamique selon Site.Language
Landmarks
Layout baseof.html avec header, main, nav, footer
Titres
Front matter avec title, single.html en H1
Lien d'évitement
Partial skip-link au début de body
Menus interactifs
Sous-menus avec gestion clavier et aria-expanded
Checklist accessibilité Hugo
Vérifiez ces points essentiels avant de mettre votre site Hugo en production.
- baseof.html avec landmarks sémantiques
- Attribut lang dynamique
- Skip link en début de body
- Thème audité ou custom
- Shortcodes avec paramètres alt/caption
- Menus clavier-compatibles
- TOC dans un <nav> aria-label
- Focus visible stylé
- Multilingue avec hreflang
- CI axe-cli ou pa11y
Questions Fréquentes sur Hugo et l'accessibilité
Hugo peut-il produire un site RGAA conforme ?
Oui. Hugo génère du HTML statique, ce qui facilite grandement la conformité. Un layout bien structuré et un thème audité permettent d'atteindre 100% des critères techniques automatiques.
Quel thème Hugo est accessible par défaut ?
Docsy (Google) est une bonne référence pour la documentation. Pour un blog, vérifiez les issues GitHub du thème concernant l'accessibilité avant de l'adopter. Beaucoup de thèmes tiers ont des lacunes.
Comment auditer la sortie Hugo dans le CI ?
Après hugo --minify, lancez axe-cli sur les fichiers du dossier public, ou utilisez pa11y-ci avec un sitemap. Intégrez ce check dans votre pipeline GitHub Actions ou GitLab CI.
Outils Recommandés pour Hugo
Hugo Docsy Theme
Thème Hugo pour documentation, utilisé par Google et Kubernetes, avec une bonne base d'accessibilité.
Hugo Bootstrap 5
Thèmes Hugo basés sur Bootstrap 5, framework avec attention portée à l'accessibilité.
Axe CLI
Outil CLI pour auditer les fichiers HTML statiques générés par Hugo dans votre pipeline CI.
Scan RGAA Checker
Scannez votre site Hugo déployé pour valider la conformité RGAA 4.1 complète.
Auditez votre site Hugo gratuitement
Vérifiez si votre application respecte les 106 critères RGAA en moins de 30 secondes.
Lancer un audit RGAA gratuit