Hiérarchie des titres H1-H6 : structure, pièges et audit RGAA

Dans NVDA, la touche H saute directement d’un titre au suivant. L’utilisateur peut ainsi traverser une page longue sans lire chaque paragraphe, en cherchant la section qui l’intéresse. Sur un article de 3 000 mots, c’est la différence entre trouver l’information en 20 secondes ou devoir écouter la page en entier.

JAWS propose la même navigation. VoiceOver iOS permet de filtrer les titres d’un glissement. Ce mode de navigation existe dans tous les lecteurs d’écran parce que les titres sont le plan du document : ils indiquent la structure et permettent de se repérer.

Quand les titres sont absents, mal hiérarchisés ou utilisés pour leur rendu visuel, ce plan s’effondre.

Ce que NVDA annonce

Quand l’utilisateur navigue titre par titre, NVDA annonce le contenu du titre suivi de son niveau : “Titre de niveau 2 : Nos services”. La hiérarchie est donc audible. Un saut du niveau 2 au niveau 4 s’entend comme une incohérence : “Titre de niveau 4 : Technologies utilisées” après “Titre de niveau 2 : Développement web” suggère qu’on a sauté deux niveaux de plan.

L’extension HeadingsMap (Chrome et Firefox) affiche la hiérarchie des titres d’une page sous forme d’arbre. C’est l’outil le plus rapide pour détecter les problèmes : un arbre bien formé, des sauts de niveaux visibles immédiatement.

Un seul H1 par page

Le <h1> est le titre principal du contenu de la page. Sur une page article, c’est le titre de l’article. Sur une page de service, c’est le nom du service. Sur la page d’accueil, c’est le nom du site ou la baseline principale.

Un seul <h1> par page. Le critère RGAA 9.1 l’impose explicitement.

Le problème le plus fréquent avec l’utilisation d’un CMS comme WordPress par exemple : les widgets de sidebar qui génèrent un <h1>. Un thème configure le widget “Articles récents” avec un titre en <h1>. La page se retrouve avec deux points d’entrée principaux.

<!-- ❌ Deux H1 sur la même page -->
<main>
  <h1>Rapport annuel 2024</h1>
</main>
<aside>
  <h1>Articles récents</h1>  <!-- widget sidebar -->
</aside>

<!-- ✅ -->
<main>
  <h1>Rapport annuel 2024</h1>
</main>
<aside>
  <h2>Articles récents</h2>
</aside>

Le même problème survient quand le hero a un <h1> et que le contenu principal en a un second. Sur un site avec un bandeau pleine largeur contenant le titre de la page, vérifier que le titre visible dans la zone de contenu en dessous n’est pas un deuxième <h1>.

Les sauts de niveaux

La hiérarchie des titres ne doit pas sauter de niveaux. Après un <h2>, le titre suivant peut être <h2> (même niveau) ou <h3> (sous-section). Jamais <h4> directement.

<!-- ❌ Saut h2 → h4 -->
<h1>Nos services</h1>
<h2>Développement web</h2>
<h4>Technologies utilisées</h4>
<h2>Design graphique</h2>

<!-- ✅ Hiérarchie continue -->
<h1>Nos services</h1>
<h2>Développement web</h2>
<h3>Technologies utilisées</h3>
<h2>Design graphique</h2>

En pratique, les sauts de niveaux viennent souvent d’un composant réutilisé qui fixe son propre niveau de titre sans tenir compte du contexte de la page. Un bloc “Nos atouts” qui utilise systématiquement un <h4> se retrouve parfois imbriqué dans une section dont le titre parent est <h2>, créant un saut <h2> → <h4>.

Titres choisis pour leur rendu visuel

Le problème inverse existe aussi : choisir un niveau de titre pour son style par défaut plutôt que pour sa valeur sémantique.

Un développeur veut un texte en gras, 18px, légèrement plus grand que le corps du texte. Il prend <h3> parce que “ça ressemble à ce que le client veut”. Ce texte n’introduit aucune section, n’a aucun contenu qui en dépend. Dans HeadingsMap, la page affiche un <h3> orphelin au milieu du plan.

La correction : un élément neutre avec une classe CSS.

<!-- ❌ h3 pour l'apparence -->
<h3>Nos valeurs</h3>
<p>Texte qui suit, mais "Nos valeurs" n'est pas réellement un titre de section.</p>

<!-- ✅ Texte mis en avant sans valeur de titre -->
<p class="text-lead">Nos valeurs</p>

La règle inverse s’applique aussi. Un texte qui introduit véritablement une section doit être un titre, même s’il est visuellement discret. Styler un <h3> pour qu’il soit petit n’est pas un problème : c’est le rôle du CSS. Mais utiliser un <p> quand la structure logique appelle un <h3> prive les utilisateurs de lecteur d’écran du plan du document.

Le <br> dans les titres

Un piège peu connu, présent dans au moins deux composants fréquents (hero et sections CTA) : insérer un <br> dans un titre pour équilibrer visuellement le texte sur deux lignes.

<!-- ❌ <br> dans un titre pour le rendu visuel -->
<h1>Pour un accès au numérique<br>ouvert à tous</h1>

Certains lecteurs d’écran répètent le niveau du titre après le saut de ligne. NVDA peut annoncer : “Titre de niveau 1 : Pour un accès au numérique. Titre de niveau 1 : ouvert à tous.” Le titre est scindé en deux annonces.

La correction CSS préserve l’équilibre visuel sans toucher au HTML :

h1 {
  text-wrap: balance;
}

text-wrap: balance est supporté dans Chrome, Firefox et Safari depuis 2023. Il répartit le texte équitablement sur les lignes disponibles.

Pièges par composant

Hero / bandeau en-tête de page

Le <h1> doit être dans le hero si le hero affiche le titre de la page. Sur les sites WordPress FSE construits avec le bloc Cover, le titre est souvent en <h1> à l’intérieur du bloc Cover, puis un deuxième titre apparaît dans le contenu principal. Vérifier avec HeadingsMap que la page ne contient qu’un seul <h1>.

Autre piège : un <h2> stylisé pour ressembler visuellement à un <h1> (taille, graisse, couleur identiques). Le plan du document reste incohérent.

Accordéon

Un accordéon peut être construit de deux façons : avec des boutons <button> comme déclencheurs, ou avec des titres <h2>/<h3> contenant des boutons. Les deux approches sont valides selon l’APG WAI-ARIA. Mais la deuxième modifie le plan du document : les titres des sections de l’accordéon apparaissent dans HeadingsMap et dans la navigation par titres de NVDA.

<!-- Accordéon avec titres (ces h3 apparaissent dans le plan) -->
<h3>
  <button aria-expanded="false" aria-controls="panneau-1">
    Quels sont vos délais ?
  </button>
</h3>
<div id="panneau-1" hidden>...</div>

<!-- Accordéon sans titres (les boutons n'apparaissent pas dans le plan) -->
<button aria-expanded="false" aria-controls="panneau-1">
  Quels sont vos délais ?
</button>
<div id="panneau-1" hidden>...</div>

Choisir en fonction du contenu. Si l’accordéon couvre des sections majeures de la page (une FAQ principale, les étapes d’un processus), les titres dans le plan sont utiles. Pour un accordéon de détails secondaires, des boutons seuls suffisent.

Blocs alternés image+texte

Un bloc “image à gauche, texte à droite” répété plusieurs fois dans une page de services est une source fréquente de niveaux mal choisis. Chaque bloc a un titre. Si la section qui les contient a un <h2>, les titres des blocs doivent être <h3>. En pratique, le composant est souvent configuré avec un <h2> fixe, ce qui casse la hiérarchie dès que le contexte est plus profond.

<!-- ❌ H2 dans un bloc qui est sous-section d'un H2 de section -->
<section>
  <h2>Nos activités nautiques</h2>
  <div class="bloc-image-texte">
    <img src="surf.jpg" alt="Cours de surf">
    <div>
      <h2>Surf</h2>  <!-- devrait être h3 -->
      <p>...</p>
    </div>
  </div>
</section>

<!-- ✅ -->
<section>
  <h2>Nos activités nautiques</h2>
  <div class="bloc-image-texte">
    <img src="surf.jpg" alt="Cours de surf">
    <div>
      <h3>Surf</h3>
      <p>...</p>
    </div>
  </div>
</section>

Sections CTA

Une section CTA sans titre n’apparaît pas dans le plan du document. Pour un utilisateur naviguant par titres, cette section est invisible jusqu’à ce qu’il y arrive en lecture linéaire. Si la section contient une action importante (inscription, rendez-vous, contact), l’absence de titre nuit à la navigabilité.

Un <div> avec une belle accroche visuelle ne remplace pas un <h2>.

Pied de page

Un footer contenant plusieurs colonnes avec des titres (“Navigation”, “Nos services”, “Contactez-nous”) doit commencer ces titres après le <h1> et les titres du contenu principal. Sur un article, le contenu utilise <h2> et <h3>. Les titres du footer doivent être <h2> au même niveau ou plus bas.

Un footer qui commence ses titres à <h1> crée autant de <h1> supplémentaires que de colonnes. Le plan du document devient inexploitable.

RGAA

Critère 9.1 : la page possède-t-elle une hiérarchie de titres cohérente ?

Tester avec HeadingsMap pour voir l’arbre complet, puis naviguer avec H dans NVDA pour vérifier que le plan est compréhensible à l’écoute. La liste des titres doit permettre de comprendre la structure de la page sans lire le contenu.

Checklist

• Un seul <h1> par page, contenant le titre principal du contenu
• Aucun saut de niveaux (après <h2>, le suivant est <h2> ou <h3>, pas <h4>)
• Aucun titre utilisé pour son rendu visuel plutôt que sa valeur sémantique
• Aucun <br> à l’intérieur d’un titre
• Les widgets WordPress (sidebar, footer) n’utilisent pas de <h1>
• Les blocs image+texte répétés utilisent le bon niveau selon leur profondeur dans la page
• Les sections CTA ont un titre dans le plan
• Les titres d’accordéon, si présents, s’intègrent cohéremment dans la hiérarchie de la page

Erreurs fréquentes en audit