« Deux balises h1 sur la même page » : ce message, remonté par un outil d’audit automatisé, ne pointait vers aucun titre visible en double à l’écran. La cause se trouvait ailleurs, dans une combinaison entre le gabarit du thème et un réglage par défaut d’une extension SEO très répandue, qui insère parfois un titre masqué visuellement mais parfaitement lisible par un lecteur d’écran.
Ce texte ne traite pas du paramétrage SEO de l’extension elle-même, largement documenté par ailleurs, mais spécifiquement de ce conflit de hiérarchie et de sa correction, transposable à toute extension générant un titre additionnel dans le flux du document.
Le symptôme : une hiérarchie cohérente à l’écran, incohérente au clavier
Sur le gabarit d’archive concerné, le titre affiché à l’écran ressemblait à une structure normale : le nom de la catégorie en grand, suivi des articles listés. Pourtant, la navigation par titres d’un lecteur d’écran révélait un titre supplémentaire, non visible, juste avant le titre de catégorie attendu, reprenant le nom du site suivi d’un séparateur.
Ce titre supplémentaire provenait d’un pattern inséré automatiquement par le thème dans l’en-tête de certains gabarits, initialement prévu pour un usage ponctuel, mais activé sur l’ensemble des archives sans que personne ne s’en rende compte visuellement, puisque du CSS le masquait entièrement.
Pourquoi le CSS masque le problème, pas le DOM
Une règle display: none ou visibility: hidden retire un élément de l’affichage visuel, mais ne le retire pas nécessairement de l’arbre d’accessibilité restitué aux technologies d’assistance selon la méthode de masquage utilisée. Un titre masqué avec une classe utilitaire de type « screen-reader-text » mal choisie reste donc parfaitement audible pour un lecteur d’écran, même invisible à l’œil.
Diagnostiquer avec l’inspecteur d’accessibilité, pas seulement visuellement
Le seul moyen fiable de détecter ce type de conflit consiste à ouvrir le panneau d’accessibilité des DevTools et à inspecter l’arbre complet des titres de la page, plutôt que de se fier à l’apparence visuelle du gabarit. Une recherche rapide dans le code source rendu, à la recherche des balises h1 présentes, confirme ensuite l’origine exacte du titre parasite.
<h1 class="masque-visuellement">WP Moderne — Blog développement WordPress</h1>
<header>
<h1>Catégorie : Accessibilité</h1>
</header>
Le correctif : neutraliser le titre parasite sans toucher au plugin
Plutôt que de modifier les réglages internes de l’extension SEO, qui pourraient être réinitialisés à la prochaine mise à jour, corrigez le gabarit du thème responsable de l’insertion. Si le pattern fautif provient d’un filtre WordPress ajouté par un thème ou une extension maison, retirez-le proprement plutôt que de masquer davantage l’élément en CSS.
add_action( 'wp', function () {
remove_action( 'wp_body_open', 'inserer_titre_masque_archives' );
} );
Si le titre masqué provient réellement d’un comportement par défaut de l’extension SEO sur certains gabarits, vérifiez d’abord la documentation officielle des filtres qu’elle expose avant d’intervenir directement dans son code, afin de ne pas casser une fonctionnalité prévue pour d’autres besoins légitimes, comme un texte de repli pour les moteurs de recherche.
- Repérer le titre parasite dans l’arbre d’accessibilité, pas à l’écran
- Identifier précisément quel gabarit ou quel filtre l’insère
- Corriger à la source plutôt que de masquer davantage en CSS
Étendre le contrôle à l’ensemble du site
Une fois ce conflit résolu sur un gabarit, vérifiez les autres types de pages générées par WordPress : page d’accueil, article, page statique, résultat de recherche. Un même pattern d’en-tête partagé entre plusieurs gabarits peut reproduire le même défaut ailleurs, avec un titre visible différent qui masque une hiérarchie tout aussi incohérente en arrière-plan.
Un titre invisible à l’écran reste un titre bien réel pour un lecteur d’écran : ne jugez jamais une hiérarchie de titres uniquement d’après ce que montre l’affichage.
Prévenir la récidive après une mise à jour
Ajoutez un test automatisé qui vérifie l’unicité du h1 sur chaque gabarit critique, afin qu’une future mise à jour de thème ou d’extension ne réintroduise pas silencieusement ce type de conflit sans que personne ne le remarque avant plusieurs mois.
En résumé
Un titre masqué visuellement peut parfaitement rester audible pour un lecteur d’écran et casser la hiérarchie perçue : inspectez toujours l’arbre d’accessibilité réel plutôt que l’apparence de la page, et corrigez le gabarit à la source plutôt que d’empiler un masquage CSS supplémentaire.
