Hiérarchie des titres

La hiérarchie des titres est la discipline qui consiste à utiliser les éléments <h1>-<h6> pour former un plan cohérent du contenu d’une page. Bien appliquée, elle offre aux utilisateurs de lecteurs d’écran une table des matières gratuite. Mal appliquée (niveaux sautés, titres purement décoratifs, plusieurs h1, divs génériques utilisés comme titres), elle rend la page incompréhensible pour les utilisateurs de technologies d’assistance.

La structure de base

<h1>Titre de l'article (un seul par page)</h1>
  <h2>Section principale</h2>
    <h3>Sous-section</h3>
    <h3>Sous-section</h3>
  <h2>Section principale</h2>
    <h3>Sous-section</h3>
      <h4>Sous-sous-section</h4>

Les règles :

1. Un seul <h1> par page — le titre principal de la page. Plusieurs h1 désorienter les lecteurs d’écran sur l’identité de la page.
2. Aucun niveau sauté en descendant. Un <h2> peut être suivi d’un <h3> (un niveau plus profond) mais pas d’un <h4> (deux niveaux plus profond). Sauter un niveau signale au lecteur d’écran qu’il manque quelque chose entre les deux.
3. Les titres reflètent la structure du contenu, non le style visuel. Si un texte paraît grand mais n’est pas le titre d’un nouveau contenu, il faut utiliser un paragraphe stylisé, pas un titre.
4. Pas de titres vides. <h2></h2> n’a aucun sens. Il faut soit le renseigner, soit le supprimer.

Pourquoi les lecteurs d’écran s’y intéressent

L’opération de navigation la plus fréquente avec un lecteur d’écran est « aller au titre suivant » — la touche H dans JAWS et NVDA, le mode Rotor « Titres » dans VoiceOver, le contrôle de lecture des titres dans TalkBack.

Un utilisateur ouvrant un long article appuie plusieurs fois sur H pour avoir une idée de la structure de l’article avant d’en lire le contenu. Si les titres sont cohérents, il obtient un plan gratuit du texte. Si les titres sont purement décoratifs ou sautent des niveaux, il obtient du bruit.

Ce qui échoue en production

• Pas de <h1>. La page n’a pas de titre principal. Les lecteurs d’écran annoncent le titre de la page via <title>, mais la navigation par titres dans la page n’a aucun ancrage. Fréquent sur des pages CMS mal structurées où le titre de l’article est affiché en texte stylisé mais jamais marqué comme <h1>.
• Plusieurs <h1>. Le « titre hero » et le « titre de la première section » sont tous deux marqués <h1>. Les utilisateurs de lecteurs d’écran entendent deux h1 et ne savent pas lequel est le titre de la page.
• Niveaux sautés. <h1> → <h3> parce que le design ne voulait pas de texte de taille <h2>. La navigation du lecteur d’écran indique « niveau de titre manquant ».
• Divs stylisés comme des titres. <div class="hed-xl">Titre de section</div>. Le lecteur d’écran ne perçoit aucun titre. Solution : utiliser le <hN> correct, stylisé avec CSS.
• Titres utilisés pour la mise en page. Placer <h2> sur un libellé de barre latérale pour qu’il ressemble visuellement à un titre, alors que ce libellé n’est pas un titre en termes de contenu. Il faut utiliser un paragraphe stylisé.

Comment auditer la hiérarchie des titres

Trois approches :

1. Liste des titres du lecteur d’écran. Ouvrir Insérer+F7 dans NVDA ou VO+U → Titres. La liste affichée doit avoir du sens en tant que plan de la page. Sinon, corriger le balisage.
2. Extension HeadingsMap. Affiche visuellement le plan des titres de la page. Les niveaux et les lacunes sont immédiatement visibles.
3. Analyse axe-core. Détecte le h1 manquant, les niveaux sautés (dans certaines configurations) et les titres vides.

Pourquoi « un seul h1 par page » est un point débattu

HTML5 suggérait initialement que les éléments <section> imbriqués créaient leurs propres portées de titres, autorisant plusieurs <h1>. Les navigateurs et les lecteurs d’écran n’ont jamais implémenté ce comportement. Le groupe de travail WCAG du W3C est revenu à la règle « un h1 par page » comme orientation opérationnelle. La plupart des guides de style modernes et des audits d’accessibilité appliquent la règle du h1 unique.