Hiérarchie de titres incorrecte : pourquoi sauter un niveau casse la navigation

La plupart des lecteurs d'écran permettent d'afficher la liste de tous les titres d'une page et d'accéder directement à l'un d'eux. C'est l'un des moyens les plus rapides de parcourir une page longue sans la lire de bout en bout, comparable au regard d'une personne voyante qui saute d'un intertitre en gras à l'autre. Ce mode de navigation suppose que les titres soient imbriqués dans un ordre logique : un H1 pour le titre de la page, des H2 pour les sections principales, des H3 pour les sous-sections, et ainsi de suite - sans jamais sauter un niveau en descendant.

Cela relève du critère de succès 1.3.1 des WCAG (Information et relations), niveau A.

Les deux erreurs typiques

Niveaux sautés. Passer d'un <h1> directement à un <h3> sans <h2> intermédiaire n'est pas seulement visuellement étrange : une personne qui navigue de titre en titre n'a aucun moyen de savoir qu'une section a été sautée, ou ne sait plus où elle se trouve dans la structure du document.

<!-- Avant -->
<h1>Rapport annuel</h1>
<h3>Répartition du chiffre d'affaires</h3>

<!-- Après -->
<h1>Rapport annuel</h1>
<h2>Répartition du chiffre d'affaires</h2>

Titres choisis pour leur taille visuelle, et non pour la structure du document. Utiliser un <h3> quelque part uniquement parce que « la taille convenait » - plutôt que parce que ce contenu est réellement une sous-section du <h2> qui précède - casse le plan tout autant que sauter un niveau, alors même que rien ne paraît anormal à l'écran. La balise de titre doit toujours refléter la structure réelle du contenu : utilisez CSS pour décider de l'apparence d'un titre, et la balise pour dire ce qu'il est.

Le problème inverse : du texte en gras ou de grande taille mis en forme pour ressembler à un titre, avec un <p> ou un <span> au lieu d'une vraie balise de titre. Celui-ci est totalement absent de la liste de navigation par titres : le « titre » que voit une personne voyante n'en est pas un pour un lecteur d'écran, et ne peut donc être ni atteint directement ni intégré au plan de la page.

Comment le corriger

Choisissez les balises de titre d'après la structure du document, puis donnez-leur en CSS l'apparence voulue par la maquette : la balise HTML d'un titre et son rendu visuel sont deux décisions distinctes, et les confondre est la cause de presque toutes les non-conformités liées aux titres.

/* Un h2 peut paraître petit si la maquette le demande - la balise reste h2 */
h2.section-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
}

Chaque page doit également comporter exactement un <h1> décrivant son sujet général - ni zéro, ni plusieurs en concurrence.

Références officielles

• Deque University : empty-heading
• Deque University : heading-order
• Deque University : p-as-heading
• Technique W3C G141