Les titres sont un sommaire, pas une typographie

Un utilisateur de lecteur d’écran ne lit pas la page de haut en bas : il demande la liste des titres et saute directement à la section qui l’intéresse. La hiérarchie des titres est sa table des matières.

Quand elle est décidée d’après l’apparence — « ce h3 rendait mieux » —, le sommaire devient faux, et la navigation par titres perd tout intérêt.

Les trois règles

1. Un seul h1 par page, qui énonce le sujet de la page.
2. Aucun saut de niveau descendant. Après un h2 vient un h2 ou un h3, jamais un h4. Remonter de plusieurs niveaux d’un coup est en revanche normal : on ferme plusieurs sections.
3. Le niveau se déduit de la structure, jamais de la taille. Si le rendu ne convient pas, c’est la feuille de styles qu’il faut changer.

Les pièges des gabarits

Sur un site industrialisé, la hiérarchie n’est pas décidée par le rédacteur mais par le gabarit. Deux cas reviennent :

• Un titre de widget en h3 placé avant le h2 du contenu : la structure saute sur toutes les pages du site.
• Un composant réutilisable qui impose son niveau. Un bloc « articles liés » codé en h2 sera faux partout où il est inséré dans une section de niveau inférieur. Le niveau doit être un paramètre du composant.

Comment le vérifier

À la main, la table des matières d’une page doit se lire comme un plan cohérent : si vous ne comprenez pas la page à partir de ses seuls titres, la structure est à revoir.

En automatique, c’est l’un des rares points qu’un outil vérifie de façon fiable — et ce site le contrôle à chaque mise en ligne, sur chacune de ses pages : un seul h1, aucun saut de niveau, sous peine d’échec du déploiement.

Le bénéfice au-delà de l’accessibilité

La même structure sert les moteurs de recherche et les moteurs de réponse, qui découpent le contenu en unités de sens à partir des titres. Le recoupement est détaillé sur accessibilité et référencement.