C'est quoi
Les balises de titre (<h1> à <h6>) forment le plan de la page. Un
lecteur d'écran s'en sert comme d'une table des matières : l'utilisateur
saute de titre en titre pour trouver ce qu'il cherche.
Trois règles :
- Un
<h1>unique est la pratique recommandée : il annonce le sujet principal de la page. - Pas de saut de niveau : après un
<h2>, on passe à<h3>, pas directement à<h4>. - Le niveau reflète la structure, pas l'apparence. On ne choisit pas
<h3>parce qu'il est plus petit. La taille se règle en CSS.
Erreur fréquente : du texte mis en gras et en gros pour ressembler à un
titre, sans balise <h>. Visuellement c'est un titre ; pour le lecteur
d'écran, c'est du texte ordinaire, invisible dans le plan.
Qui est touché
- Les personnes aveugles : sans hiérarchie, elles perdent la navigation rapide par titres et doivent parcourir toute la page en linéaire.
- Les personnes avec un trouble cognitif : une structure claire aide à se repérer.
- Le référencement : les moteurs lisent la hiérarchie des titres pour comprendre le plan du contenu.
Impact business
Pour un utilisateur de lecteur d'écran, la navigation par titres est l'un des moyens les plus rapides de parcourir une page. Une hiérarchie cassée lui retire ce raccourci : il doit tout écouter, du début à la fin.
L'enquête WebAIM relève régulièrement des structures de titres absentes ou désordonnées sur une part notable des pages analysées.
L'impact est double : accessibilité dégradée, et compréhension du contenu affaiblie côté moteurs de recherche. Une page bien structurée sert les deux d'un coup.
Comment le détecter
- Audit Mynto : le scan vérifie la présence d'un
<h1>unique et signale les sauts de niveau dans la hiérarchie. - Manuel : liste les titres de la page dans l'ordre. Le plan obtenu doit être logique, sans trou de niveau.
- Extension navigateur : un outil comme HeadingsMap affiche l'arborescence des titres en un coup d'œil.
Comment corriger
<h1>Notre agence</h1>
<h4>Nos services</h4>
<div class="gros-titre">Contact</div><h1>Notre agence</h1>
<h2>Nos services</h2>
<h2>Contact</h2>On corrige le niveau pour suivre la structure réelle : après le <h1>,
les sections principales sont des <h2>. Le faux titre en <div> devient
un vrai <h2>. La taille du texte se règle ensuite en CSS, indépendamment
du niveau de balise.
Sur WordPress, l'éditeur de blocs propose un bloc Titre avec un sélecteur
de niveau : choisis le niveau selon la structure, jamais selon la taille.
Méfie-toi des thèmes qui mettent un <h2> ou plus dans l'en-tête ou le
pied de page et décalent toute la hiérarchie.
Questions fréquentes
Peut-il y avoir plusieurs h1 sur une page ?
Techniquement, HTML l'autorise. Mais la pratique recommandée reste un <h1> unique par page, qui annonce le sujet principal ; les sections suivantes commencent en <h2>. C'est aussi ce que vérifie Mynto.
Un saut de h2 à h4 est-il vraiment un problème ?
Oui. Le lecteur d'écran annonce les niveaux : un saut fait croire à l'utilisateur qu'un titre de niveau intermédiaire a été manqué.
À lire aussi
Cette erreur est-elle sur ton site ?
Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.