Accessibilité numérique
Titres H1, H2, H3 : la hiérarchie qui sert l'accessibilité et le SEO
La hiérarchie des titres sert deux causes à la fois. Elle rend votre page navigable au lecteur d'écran, et compréhensible par Google.
C'est l'une des rares corrections qui améliore l'accessibilité et le référencement d'un seul geste. Voici la règle, et les pièges.
Vérifier la structure de mes pages
À quoi sert la hiérarchie des titres
Un utilisateur voyant balaie la page du regard. Il repère les grands titres, saute au bon endroit, et lit.
Un lecteur d'écran offre exactement la même possibilité, à une condition. Les titres doivent exister dans le code, avec leur niveau.
L'outil annonce alors « titre de niveau 2 », puis permet de sauter au suivant. Sans cette structure, la personne écoute la page entière, du début à la fin.
La règle, en trois lignes
- un seul titre de niveau 1 par page, qui annonce le sujet ;
- des niveaux 2 pour les grandes sections ;
- des niveaux 3 à l'intérieur d'un niveau 2, jamais avant.
Autrement dit, on ne saute pas de marche. Un niveau 4 ne suit jamais directement un niveau 2.
La descente se fait pas à pas. La remontée, elle, peut sauter autant de niveaux que nécessaire.
Le piège numéro un : choisir le niveau pour la taille
Voici la faute que je retrouve partout. Un titre passe en niveau 4 parce qu'il paraissait trop gros en niveau 2.
Le résultat visuel convient, la structure logique disparaît. Le lecteur d'écran annonce alors une organisation qui n'existe pas.
La règle tient en une phrase. Le niveau se choisit selon le plan, la taille se règle en feuille de style.
Le piège numéro deux : le faux titre en gras
Un paragraphe mis en gras ressemble à un titre. Pour un lecteur d'écran, ce n'est qu'un paragraphe.
Il n'apparaît donc dans aucun sommaire, et personne ne peut y sauter.
Si le texte introduit une section, faites-en un vrai titre. Sinon, laissez-le en paragraphe.
Le piège numéro trois : plusieurs titres de niveau 1
Beaucoup de thèmes placent le nom du site en niveau 1, puis le titre de la page également.
La page annonce alors deux sujets principaux. Google hésite, et l'utilisateur au lecteur d'écran aussi.
Vérifiez ce point une fois, sur votre gabarit. La correction vaut ensuite pour toutes vos pages.
Ce que Google fait de cette structure
Le moteur lit votre page à peu près comme un lecteur d'écran. Il s'appuie sur les titres pour identifier le sujet et les sous-sujets.
Une hiérarchie des titres propre produit trois bénéfices mesurables :
- le sujet de la page se comprend plus vite ;
- vos sections deviennent éligibles aux extraits enrichis ;
- vos pages longues restent lisibles, donc mieux évaluées.
Inutile en revanche d'empiler les mots-clés dans chaque titre. Un titre écrit pour un humain suffit.
Un exemple de hiérarchie des titres correcte
| Niveau | Titre | Rôle |
|---|---|---|
| 1 | Rénovation de salle de bain à Lyon | Le sujet de la page, une seule fois |
| 2 | Nos prestations | Une grande section |
| 3 | Remplacement de baignoire | Un détail de la section |
| 3 | Douche à l'italienne | Un autre détail, au même niveau |
| 2 | Nos tarifs | Nouvelle grande section |
Remarquez la remontée du niveau 3 vers le niveau 2. Elle est parfaitement autorisée.
Comment vérifier votre structure
La méthode visuelle
Écrivez le plan de votre page sur une feuille, uniquement d'après les titres. Si le plan ne se tient pas, la structure non plus.
La méthode par outil
La plupart des navigateurs proposent une extension qui affiche l'arborescence des titres. Les sauts de niveau apparaissent immédiatement.
Un audit automatisé relève également ce défaut, page par page.
Le cas de WordPress
L'éditeur de blocs propose les niveaux 1 à 6. Le niveau 1 est généralement déjà pris par le titre de l'article.
Commencez donc vos sections en niveau 2. C'est exactement ce que fait cet article.
Attention aux constructeurs de page. Ils laissent souvent choisir le niveau dans un menu déroulant, avec un aperçu de la taille juste à côté. La tentation est grande, et l'erreur revient.
La hiérarchie des titres sur les pages de service
Ces pages souffrent d'un mal particulier. Elles empilent des blocs visuels sans plan d'ensemble.
Reprenez-les avec une règle simple : chaque bloc visuel qui introduit un sujet mérite un titre, au bon niveau.
Le gain se voit vite. La page devient navigable, et Google identifie enfin vos prestations une par une.
Un titre par idée, et rien de plus
Une section sans contenu ne mérite pas de titre. Deux titres consécutifs sans texte entre eux signalent un plan bancal.
À l'inverse, un bloc de six paragraphes sans respiration gagne presque toujours à être découpé.
Pour situer ce critère dans l'ensemble, consultez notre guide des critères RGAA. Les autres écarts fréquents figurent dans notre liste des quinze erreurs.
Dépistage automatique : il couvre environ 30 % des critères du référentiel. Il ne remplace pas un audit manuel et ne vaut pas attestation de conformité.
Votre gabarit affiche deux titres de niveau 1 ? Écrivez-nous, la correction prend souvent quelques minutes.
Références : tutoriel structure du W3C et portail de l'accessibilité numérique de l'État.
Votre site est-il en règle ?
Le dépistage de conformité vérifie une trentaine de points en une minute. Gratuit, sans inscription.
David Laroura
OFA Web · création de site, SEO, maintenance et conformité
