Structure des Titres Accessible : Guide complet H1 à H6

La structure des titres est l'un des piliers de l'accessibilité web. Elle permet aux technologies d'assistance de présenter un sommaire navigable et aide tous les utilisateurs à comprendre l'organisation du contenu.

Pourquoi les titres sont essentiels

Navigation par titres

Les utilisateurs de lecteurs d'écran (NVDA, JAWS, VoiceOver) peuvent naviguer de titre en titre avec un simple raccourci clavier (touche H). Sans structure de titres cohérente, ils doivent écouter l'intégralité de la page pour en comprendre l'organisation.

Impact SEO et accessibilité

Une bonne hiérarchie de titres bénéficie à :

• L'accessibilité : Navigation et compréhension facilitées
• Le SEO : Google comprend mieux la structure de votre contenu
• L'expérience utilisateur : Lecture en diagonale possible
• La maintenance : Code plus lisible et sémantique

C'est l'un des recouvrements les plus nets entre accessibilité et SEO : un seul travail de structure sert les lecteurs d'écran et les moteurs.

Les critères WCAG concernés

1.3.1 Information et relations (Niveau A)

Les titres doivent être balisés sémantiquement (h1-h6), pas seulement stylés visuellement.

2.4.6 Titres et labels (Niveau AA)

Les titres doivent décrire le sujet ou l'objectif de la section qu'ils introduisent.

2.4.10 Titres de section (Niveau AAA)

Les sections de contenu doivent être identifiées par des titres.

Règles d'or pour les titres

Règle 1 : Un seul H1 par page

Chaque page doit avoir un unique H1 qui décrit son contenu principal. Ce H1 est généralement placé au début du contenu principal, juste après la navigation.

<!-- CORRECT -->
<h1>Guide de l'accessibilité des formulaires</h1>

<!-- INCORRECT : plusieurs H1 -->
<h1>Mon site web</h1>
<h1>Guide de l'accessibilité des formulaires</h1>

Règle 2 : Respecter la hiérarchie

Les titres doivent se succéder dans l'ordre logique. Ne sautez pas de niveau vers le bas.

<!-- CORRECT -->
<h1>Accessibilité web</h1>
  <h2>Les 4 principes WCAG</h2>
    <h3>Perceptible</h3>
    <h3>Utilisable</h3>
  <h2>Application au RGAA</h2>
    <h3>Les 106 critères</h3>

<!-- INCORRECT : saut de niveau -->
<h1>Accessibilité web</h1>
  <h4>Les 4 principes WCAG</h4> <!-- Erreur : saute H2 et H3 -->

Règle 3 : Remonter dans la hiérarchie est autorisé

Vous pouvez "remonter" d'un H4 à un H2 si vous terminez une section pour en commencer une nouvelle.

<h2>Section A</h2>
  <h3>Sous-section A.1</h3>
    <h4>Détail A.1.1</h4>
<h2>Section B</h2> <!-- OK : nouvelle section de même niveau -->

Règle 4 : Choisir par hiérarchie, pas par apparence

Le niveau de titre doit refléter la structure du document, pas l'apparence souhaitée.

<!-- INCORRECT : choix par apparence -->
<h4>Ce texte est petit, donc H4</h4>

<!-- CORRECT : utiliser CSS pour l'apparence -->
<h2 class="titre-petit">Sous-section importante</h2>

.titre-petit {
  font-size: 1rem;
  font-weight: normal;
}

Erreurs courantes à éviter

Utiliser des titres pour le style

<!-- INCORRECT -->
<h3>Ceci n'est pas vraiment un titre, juste du texte en gras</h3>

<!-- CORRECT -->
<p><strong>Ceci n'est pas un titre, juste du texte en gras</strong></p>

Titres vides ou non descriptifs

<!-- INCORRECT -->
<h2>...</h2>
<h2>Section 1</h2>
<h2>Cliquez ici</h2>

<!-- CORRECT -->
<h2>Nos services de conseil</h2>
<h2>Méthode de travail</h2>
<h2>Nous contacter</h2>

Logo dans le H1

<!-- INCORRECT -->
<h1>
  <img src="logo.png" alt="Ma société">
</h1>

<!-- CORRECT -->
<a href="/">
  <img src="logo.png" alt="Ma société - Accueil">
</a>
<h1>Titre unique de cette page</h1>

Structure type d'une page

<header>
  <nav><!-- Navigation principale --></nav>
</header>

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

  <section>
    <h2>Première grande section</h2>
    <p>Contenu...</p>

    <h3>Sous-section</h3>
    <p>Contenu...</p>
  </section>

  <section>
    <h2>Deuxième grande section</h2>
    <p>Contenu...</p>
  </section>
</main>

<aside>
  <h2>Contenu connexe</h2>
</aside>

<footer>
  <!-- Pied de page -->
</footer>

Tester votre structure de titres

Outils recommandés

1. Extension HeadingsMap : Visualise la structure des titres en arborescence
2. Extension WAVE : Signale les problèmes de hiérarchie
3. RGAA Checker : Analyse complète incluant les titres

Test manuel avec lecteur d'écran

1. Activez NVDA ou VoiceOver
2. Utilisez la touche H pour naviguer de titre en titre
3. Vérifiez que l'ordre a du sens
4. Vérifiez que chaque titre décrit bien sa section

Titres et composants dynamiques

Modales et dialogues

<div role="dialog" aria-labelledby="modal-titre">
  <h2 id="modal-titre">Confirmer la suppression</h2>
  <!-- Contenu de la modale -->
</div>

Accordéons

<div class="accordion">
  <h3>
    <button aria-expanded="false" aria-controls="section1">
      Titre de la section repliable
    </button>
  </h3>
  <div id="section1" hidden>
    <!-- Contenu -->
  </div>
</div>

Onglets

<h2 id="tabs-titre">Options de livraison</h2>
<div role="tablist" aria-labelledby="tabs-titre">
  <!-- Onglets -->
</div>

Conclusion

Une structure de titres bien pensée est l'un des investissements les plus rentables en accessibilité : elle ne demande pas de développement complexe mais améliore considérablement l'expérience pour les utilisateurs de technologies d'assistance.

Pour vérifier automatiquement la structure de vos titres, lancez un audit avec RGAA Checker. Notre outil détecte les H1 multiples, les sauts de niveau et les titres vides.