Utilisez une hiérarchie de titres propre

Ce que vérifie ce contrôle

Analyse chaque élément de titre (h1–h6) de la page dans l’ordre du document et vérifie que les niveaux descendent sans saut. Le contrôle échoue lorsqu’un h4 apparaît avant tout h3, lorsque deux h1 cohabitent sur une même page ou lorsque la profondeur de section saute de plus d’un niveau.

Pourquoi c’est important

Un plan propre compte simultanément à trois endroits.

• Les lecteurs d’écran annoncent le niveau de titre à chaque saut. Un utilisateur qui navigue par titres (un schéma courant chez les personnes non-voyantes) entend « titre niveau 2 — fonctionnalités, titre niveau 4 — tarifs » et suppose qu’un niveau 3 a été oublié. La page devient innavigable.
• Les moteurs de recherche lisent toujours le plan des titres comme un indice de structure thématique. Un h1 suivi de cinq h3 sans aucun h2 se lit comme un bloc de contenu plat plutôt qu’un article organisé.
• Les extracteurs IA (ChatGPT browsing, Perplexity, Google AI Overviews) découpent le contenu le long des frontières de titres lorsqu’ils résument. Une hiérarchie cassée produit des fragments qui couvrent plusieurs sujets, dégradant la qualité des citations.

Comment le corriger

Utilisez exactement un seul h1 par page — généralement le titre de la page. Chaque titre suivant descend d’au maximum un niveau à la fois :

<h1>Comparatif des écouteurs sans fil en 2026</h1>
  <h2>Ce que nous avons testé</h2>
    <h3>Qualité audio</h3>
    <h3>Autonomie</h3>
  <h2>Meilleur choix global : Sony WF-1000XM5</h2>
    <h3>Avantages</h3>
    <h3>Inconvénients</h3>

Le raccourci par style visuel. Les designers utilisent parfois <h4> parce que « ça a la bonne taille ». Ne le faites pas — choisissez le niveau qui correspond au plan du document, puis stylez-le avec CSS. Tailwind : <h3 class="text-base font-semibold">.

WordPress / page builders. La plupart des éditeurs par blocs (Gutenberg, Elementor) permettent de changer le niveau d’un titre indépendamment de son style. Parcourez la page une fois et requalifiez chaque bloc.

Astro / Next.js / React. Construisez un petit wrapper <Section> qui incrémente un contexte de niveau de titre, afin que les composants réutilisables ne codent pas en dur <h3> et ne cassent pas le plan une fois imbriqués.

Vérifiez vous-même — collez l’URL de la page dans le validateur HTML du W3C et regardez l’aperçu du plan du document, ou exécutez l’extension de navigateur headingsMap.

Questions fréquentes

Puis-je avoir deux h1 sur une seule page ?

HTML5 autorise techniquement plusieurs h1 à l’intérieur d’éléments <section> ou <article>, mais tous les éditeurs de technologies d’assistance — ainsi que Google — traitent toujours un seul h1 par page comme le bon schéma. Tenez-vous-en à un seul. Voir la page Balise H1.

Et les barres latérales et widgets ?

Les titres à l’intérieur de <aside> ou de zones de mise en page répétées comptent aussi dans le plan. Soit descendez-les en <h3> pour qu’ils s’imbriquent sous le contenu principal, soit enveloppez-les dans un repère avec sa propre portée de titres.

Cela affecte-t-il les scores Lighthouse ou d’accessibilité ?

Oui — heading-order fait partie des règles axe-core que Lighthouse exécute. Une hiérarchie cassée fait directement baisser votre score d’accessibilité Lighthouse.