Structure des titres : Guide pour une hiérarchie accessible et SEO

La structure des titres est souvent sous-estimée dans les projets web. Pourtant, elle constitue l'un des piliers les plus importants de l'accessibilité et du référencement naturel. Selon l'enquête WebAIM auprès des utilisateurs de lecteurs d'écran, 67,7% d'entre eux naviguent en priorité par titres. Une hiérarchie mal construite les prive de cette navigation essentielle.

Pourquoi la structure des titres est cruciale

Pour l'accessibilité

Les technologies d'assistance offrent des raccourcis clavier pour naviguer de titre en titre :

• Touche H : titre suivant
• Touche 1-6 : titre du niveau spécifique
• Liste des titres : vue d'ensemble de la page

Sans hiérarchie logique, ces fonctionnalités deviennent inutiles. L'utilisateur doit alors écouter l'intégralité du contenu pour trouver ce qu'il cherche, ce qui est fastidieux voire impossible sur les longues pages.

Pour le SEO

Les moteurs de recherche utilisent les titres pour :

• Comprendre la structure thématique de la page
• Identifier les sujets principaux et secondaires
• Évaluer la pertinence du contenu pour une requête

Google a confirmé que les titres H1-H6 sont des signaux de pertinence. Une structure claire aide les algorithmes à interpréter votre contenu.

Pour tous les utilisateurs

Même pour les utilisateurs voyants, les titres permettent de :

• Scanner rapidement le contenu
• Identifier les sections d'intérêt
• Comprendre l'organisation de l'information

Les trois règles fondamentales

Règle 1 : Un seul H1 par page

Le <h1> représente le sujet principal de la page. Il doit être :

• Unique : un seul par page
• Descriptif : résumer le contenu principal
• Positionné : juste avant le contenu principal

<!-- Correct -->
<h1>Guide complet de l'accessibilité web</h1>

<!-- Incorrect : plusieurs H1 -->
<h1>Mon site</h1>
<h1>Guide complet de l'accessibilité web</h1>

Règle 2 : Hiérarchie logique sans sauts

Les niveaux de titres doivent s'enchaîner logiquement, sans sauter de niveau.

<!-- Correct : hiérarchie logique -->
<h1>Guide de l'accessibilité</h1>
  <h2>Introduction</h2>
  <h2>Les bases</h2>
    <h3>Structure HTML</h3>
    <h3>Navigation clavier</h3>
  <h2>Techniques avancées</h2>
    <h3>ARIA</h3>
      <h4>Rôles</h4>
      <h4>Propriétés</h4>

<!-- Incorrect : saut de H1 à H3 -->
<h1>Guide de l'accessibilité</h1>
  <h3>Les bases</h3>  <!-- Erreur : devrait être H2 -->

Exception : il est acceptable de "remonter" de niveau pour fermer une section :

<h2>Section A</h2>
  <h3>Sous-section A.1</h3>
  <h3>Sous-section A.2</h3>
<h2>Section B</h2>  <!-- OK : on ferme la section A -->

Règle 3 : Titres descriptifs et uniques

Chaque titre doit clairement décrire le contenu de sa section. Évitez les titres génériques qui n'apportent aucune information.

<!-- À éviter -->
<h2>Introduction</h2>
<h2>En savoir plus</h2>
<h2>Section 1</h2>

<!-- Préférable -->
<h2>Pourquoi l'accessibilité web est essentielle</h2>
<h2>Les 4 principes WCAG</h2>
<h2>Comment auditer votre site</h2>

Les utilisateurs de lecteurs d'écran peuvent lister tous les titres d'une page. Chaque titre doit être compréhensible hors contexte.

Erreurs courantes à éviter

Utiliser les titres pour le style

Les balises H1-H6 définissent la structure, pas l'apparence. Utilisez CSS pour le style :

<!-- Incorrect : H3 utilisé pour avoir une petite police -->
<h3>Mentions légales</h3>  <!-- Devrait être un H2 de footer -->

<!-- Correct -->
<h2 class="text-sm">Mentions légales</h2>

Sauter directement du H1 au H3

C'est le cas le plus fréquemment signalé par les outils, et le plus mal interprété. Un saut de niveau n'est pas une non-conformité au RGAA. Le glossaire du référentiel est explicite depuis la version 4.1 : « la présence de sauts hiérarchiques n'invalide pas le critère tant que cette hiérarchie plus lâche reste cohérente (un titre <h3> peut ainsi venir directement après un titre <h1>, par exemple) ». C'est le RGAA 4.0 qui l'interdisait ; la note de révision officielle documente la suppression de cette exigence.

Ce qui se juge, c'est la cohérence de la hiérarchie : ce H3 est-il bien une subdivision du H1 qui le précède ? Si oui, la page est conforme. Un saut reste à éviter (les utilisateurs de lecteurs d'écran naviguent par niveaux et s'attendent à une progression régulière), mais c'est une bonne pratique, pas une exigence.

Titres vides ou avec uniquement des icônes

Un titre doit contenir du texte lisible :

<!-- Incorrect -->
<h2><i class="icon-settings"></i></h2>

<!-- Correct -->
<h2>
  <i class="icon-settings" aria-hidden="true"></i>
  Paramètres du compte
</h2>

Utiliser des titres dans les composants

Les composants réutilisables (cards, modales) posent un défi : le niveau de titre dépend du contexte d'insertion.

<!-- Composant card -->
<article class="card">
  <h3>Titre de la card</h3>  <!-- Problème : et si la card est dans un H3 ? -->
</article>

Solutions :

1. Passer le niveau en props/paramètre
2. Utiliser aria-labelledby au lieu de titres

Intégration avec les landmarks

Les titres et les landmarks ARIA se complètent :

<header>
  <a href="/">Logo</a>
  <nav aria-label="Menu principal">...</nav>
</header>

<main>
  <h1>Titre principal de la page</h1>

  <section aria-labelledby="intro-titre">
    <h2 id="intro-titre">Introduction</h2>
    <p>...</p>
  </section>

  <section aria-labelledby="guide-titre">
    <h2 id="guide-titre">Guide pratique</h2>
    <h3>Étape 1</h3>
    <h3>Étape 2</h3>
  </section>
</main>

<aside>
  <h2>Articles liés</h2>
</aside>

<footer>
  <h2 class="sr-only">Informations du site</h2>
</footer>

Vérifier votre structure de titres

Outils automatisés

Notre validateur de hiérarchie des titres analyse votre structure et détecte :

• Les sauts de niveaux
• Les titres vides
• Les pages sans H1
• Les H1 multiples

Vous pouvez également utiliser notre audit RGAA complet pour une vérification globale de l'accessibilité.

Extensions navigateur

• HeadingsMap : visualise la structure en arborescence
• WAVE : signale les erreurs de hiérarchie
• HTML5 Outliner : génère le plan du document

Test manuel avec lecteur d'écran

Avec NVDA ou VoiceOver, appuyez sur H pour naviguer de titre en titre et vérifiez que la navigation est fluide et logique.

Structure de titres par type de page

Page d'accueil

<h1>RGAA Checker - Auditez l'accessibilité de votre site</h1>
  <h2>Nos outils</h2>
    <h3>Audit automatisé</h3>
    <h3>Vérificateur de contraste</h3>
  <h2>Pourquoi l'accessibilité</h2>
  <h2>Témoignages</h2>

Article de blog

<h1>7 erreurs d'accessibilité courantes</h1>
  <h2>1. Contraste insuffisant</h2>
    <h3>Le problème</h3>
    <h3>La solution</h3>
  <h2>2. Alt text manquants</h2>
  <!-- ... -->
  <h2>Conclusion</h2>

Page produit e-commerce

<h1>Chaussures de running Nike Air Max</h1>
  <h2>Description</h2>
  <h2>Caractéristiques techniques</h2>
  <h2>Avis clients</h2>
    <h3>Note moyenne</h3>
    <h3>Commentaires</h3>

Conclusion

La structure des titres est un investissement rentable : quelques minutes de réflexion lors de la conception apportent des bénéfices durables en accessibilité et en SEO. Les règles sont simples mais leur application systématique demande de la rigueur.

Intégrez la vérification de la hiérarchie des titres dans votre processus de création de contenu. Nos outils peuvent automatiser une partie de ce travail, mais la réflexion sur la structure logique reste une compétence humaine essentielle.