Heading levels should only increase by one : ce message, renvoyé par l’extension axe DevTools lors d’un audit de routine, est apparu sur la page d’accueil d’un site d’information locale qui utilisait deux blocs Requête imbriqués pour afficher, dans une même page, les articles à la une puis un second bloc pour les articles de la rubrique sport.
Le site publiait chaque jour une dizaine d’articles, et la page d’accueil avait été composée entièrement avec l’éditeur de blocs, sans thème enfant personnalisé ni développement sur mesure : un cas fréquent qui illustre bien comment une hiérarchie de titres peut se dégrader sans qu’aucun code custom ne soit en cause.
Symptôme : un titre de niveau 4 juste après un niveau 2
L’inspection du DOM généré par la page a révélé la séquence suivante : un <h2> « À la une » suivi directement, dans le bloc Requête correspondant, de titres d’articles en <h4>. Le niveau 3, qui aurait dû introduire une éventuelle sous-section entre le titre de rubrique et les titres d’articles, était absent, ce qui déclenchait l’alerte de l’outil d’audit automatisé.
<h2>À la une</h2>
<ul>
<li>
<h4>Le conseil municipal adopte le budget 2024</h4>
</li>
</ul>
Le second bloc Requête, dédié à la rubrique sport, reproduisait exactement le même problème, mais avec un décalage différent : cette fois un <h2> « Sport » suivi de titres d’articles en <h3>, un niveau correct localement mais qui entrait en collision avec la structure globale de la page une fois les deux blocs mis bout à bout.
Diagnostic : un niveau choisi indépendamment par chaque bloc
Le bloc Requête (core/query) et son bloc enfant Titre de la publication (core/post-title) n’imposent aucun niveau de titre par défaut cohérent avec le reste de la page : chaque instance du bloc Titre porte son propre réglage de niveau, choisi ou laissé par défaut au moment de la composition, sans lien automatique avec les autres blocs Requête présents sur la même page.
Ce fonctionnement est logique du point de vue de l’éditeur : un bloc Requête est conçu pour être réutilisable indépendamment de son contexte, sur une page d’accueil comme sur une page d’archive dédiée. Mais cette indépendance a un coût, celui de reporter entièrement sur la personne qui compose la page la responsabilité de vérifier la cohérence globale de la hiérarchie de titres, une fois plusieurs blocs Requête assemblés côte à côte.
Correctif : ajuster le niveau bloc par bloc
La correction a consisté à sélectionner chaque bloc Titre de la publication à l’intérieur des deux blocs Requête, puis à ajuster son niveau via le contrôle dédié dans la barre d’outils du bloc, représenté par une icône de titre suivie d’un chiffre.
- Sélectionner le bloc Requête « À la une » et repérer le bloc Titre de la publication qu’il contient.
- Dans la barre d’outils du bloc Titre, ouvrir le sélecteur de niveau et choisir
H3au lieu deH4. - Répéter l’opération pour le bloc Requête « Sport », qui utilisait déjà
H3à raison, sans modification nécessaire cette fois. - Revérifier l’ensemble de la page avec axe DevTools pour confirmer la disparition de l’alerte.
Le résultat final donnait une hiérarchie propre : h2 pour chaque titre de rubrique, h3 pour chaque titre d’article dans les deux blocs Requête, sans saut de niveau ni chevauchement entre les deux sections de la page.
Prévention : documenter le niveau attendu par gabarit
Pour éviter que ce type d’écart ne réapparaisse à chaque nouvelle rubrique ajoutée sur la page d’accueil, l’équipe éditoriale a documenté, dans un modèle de page réutilisable, le niveau de titre attendu pour chaque bloc Requête selon sa position : niveau 2 pour le titre de rubrique, niveau 3 pour les titres d’articles, quelle que soit la rubrique concernée.
- Le modèle de page enregistré comme motif réutilisable fixe déjà les bons niveaux par défaut.
- Un nouveau bloc Requête créé à partir de ce modèle hérite du bon réglage, sans intervention manuelle.
- Seule la création d’un bloc Requête entièrement nouveau, hors modèle, nécessite une vérification manuelle du niveau de titre.
Un bloc réutilisable ne garantit une hiérarchie cohérente que si le niveau de titre fait partie de ce qui est enregistré dans le motif, pas seulement la mise en forme visuelle.
En résumé
Deux niveaux de titre sautés dans un bloc Requête, un correctif limité à deux réglages dans la barre d’outils, mais une prévention qui repose sur un modèle de page documenté : ce cas illustre bien qu’un audit automatisé détecte le symptôme sans jamais expliquer d’où vient l’écart, et que la composition par blocs déplace la vigilance de hiérarchie de titres du code vers l’organisation éditoriale de chaque page.
