Les pages de votre site sont-elles structurées avec des titres hiérarchisés — comme un plan de document ?
Critère officiel 9.1 — Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Pourquoi c'est important
Un logiciel de lecture peut afficher la liste de tous les titres d'une page pour naviguer directement à la section souhaitée. Sans hiérarchie de titres, la personne aveugle doit écouter tout le contenu depuis le début — comme lire un livre sans chapitres ni table des matières.
Exemples concrets
Ce qui est conforme
La page « Démarches administratives » est structurée avec un Titre 1 principal, des Titres 2 pour chaque catégorie (« État civil », « Urbanisme », « Inscriptions scolaires »), et des Titres 3 pour chaque démarche. Le logiciel de lecture propose 15 titres pour naviguer directement à la section souhaitée.
Ce qui pose problème
La même page présente 12 paragraphes séparés par des lignes en gras et majuscules (ÉTAT CIVIL, URBANISME…). Visuellement organisé, mais techniquement aucun titre — le logiciel de lecture n'y trouve aucune structure et lit la page d'une traite.
Comment agir
Dans WordPress, utilisez toujours les vrais blocs Titre (Titre 2 pour les sections principales, Titre 3 pour les sous-sections) — jamais un paragraphe mis en gras, en majuscules ou agrandi. Test autonome : installez l'extension HeadingsMap dans votre navigateur. Elle affiche en un clic le plan de titres de n'importe quelle page — si la liste est vide ou ne reflète pas la structure visuelle, il faut retravailler les blocs.
Règles clés
- Un seul <h1> par page, contenant le titre principal du contenu (pas le nom du site sauf en page d'accueil).
- La hiérarchie ne doit pas sauter de niveaux : après un <h2>, le suivant peut être <h2> ou <h3>, jamais <h4> directement.
- Un titre doit décrire le contenu qui le suit — pas un titre décoratif vide de sens.
- Le style visuel est géré en CSS, pas en choisissant un niveau de titre pour son rendu par défaut.
- Pour styler un texte comme un titre sans valeur sémantique, utiliser un élément neutre (<p>, <span>) avec classe CSS — pas un <hN>.
Erreurs fréquentes
- Plusieurs <h1> sur une page (courant avec les widgets et sidebars WordPress)
- Sauts de niveaux : h2 → h4 sans h3 intermédiaire
- Titres utilisés pour leur taille visuelle plutôt que leur niveau sémantique (h3 pour styler un sous-titre alors qu'il devrait être h5)
- Absence totale de structure de titres : tout le contenu en <p> ou <div>
- Titres vides (<h2></h2>) ou ne contenant que des espaces
- aria-level mal renseigné sur des éléments avec role="heading"
Exemples de code
saut de niveau
✗ Non conforme<h1>Nos services</h1>
<h2>Développement web</h2>
<h4>Technologies utilisées</h4>
<h2>Design graphique</h2>Le saut h2 → h4 crée un trou dans la hiérarchie. Le lecteur d'écran annoncera "Titre de niveau 4" après "Titre de niveau 2", ce qui est incohérent avec une structure logique.
saut de niveau
✓ Conforme<h1>Nos services</h1>
<h2>Développement web</h2>
<h3>Technologies utilisées</h3>
<h2>Design graphique</h2>Hiérarchie continue. "Technologies utilisées" est bien une sous-section de "Développement web".
titre pour effet visuel
✗ Non conforme<!-- L'auteur veut un texte bold 18px sans valeur de titre -->
<h3>Nos valeurs</h3>Si 'Nos valeurs' n'est pas réellement un titre de section dans la hiérarchie du document, utiliser <h3> pollue la structure pour un effet visuel.
titre pour effet visuel
✓ Conforme<!-- Si c'est réellement une section dans la hiérarchie, conserver le bon niveau -->
<h3>Nos valeurs</h3>
<!-- Si c'est un texte mis en avant sans valeur de titre -->
<p class="text-lead">Nos valeurs</p>La décision dépend du contenu. Si 'Nos valeurs' introduit une section avec du contenu lisible, c'est bien un titre. Sinon, une classe CSS sur <p> est plus appropriée.
plusieurs h1 (WordPress)
✗ Non conforme<!-- Thème WordPress : widget sidebar -->
<main>
<h1>Titre de l'article</h1>
...
</main>
<aside>
<!-- Widget "Articles récents" avec h1 -->
<h1>Articles récents</h1>
</aside>Courant dans les thèmes WordPress qui utilisent des <h1> dans les widgets de sidebar. La page a plusieurs points d'entrée principaux — le plan est ambigu.
plusieurs h1 (WordPress)
✓ Conforme<main>
<h1>Titre de l'article</h1>
</main>
<aside>
<h2>Articles récents</h2>
</aside>Un seul <h1> pour le contenu principal. Les widgets de la sidebar commencent à <h2> ou <h3> selon la profondeur.
Référence WCAG : 1.3.1, 2.4.1, 2.4.6, 4.1.2