Balises hn : le plan des titres d’une page

Ce que demande le critère 9.1

Le critère 9.1 du RGAA 4.1.2 demande que, dans chaque page, l’information soit structurée par une utilisation appropriée des titres. Il compte trois tests :

• 9.1.1 : la hiérarchie entre les titres est pertinente ;
• 9.1.2 : le contenu de chaque titre est pertinent ;
• 9.1.3 : chaque passage de texte qui constitue un titre est codé avec une balise h1 à h6, ou avec role="heading" associé à aria-level.

Les trois tests demandent un jugement : est-ce que l’ordre des titres suit la logique du contenu, est-ce qu’un titre décrit bien sa section ? L’outil prépare ce jugement en montrant le plan tel qu’il est codé. Il ne peut pas le rendre à votre place.

Ce qui est à corriger, ce qui est à examiner

L’entrée « Titre » du glossaire tranche deux questions qui reviennent sans cesse. Une stricte hiérarchie est une bonne pratique, mais un saut de niveau n’invalide pas le critère tant que la hiérarchie reste cohérente : un h3 peut suivre un h1. Et la hiérarchie n’a pas obligatoirement de h1. Ces deux cas sont donc présentés comme des points à examiner, pas comme des fautes.

Deux cas sont, eux, à corriger :

• Un titre vide. Un lecteur d’écran annonce un titre, puis rien. Son contenu ne peut pas être pertinent au sens du test 9.1.2. C’est souvent une balise laissée par un constructeur de pages, ou une icône sans texte de remplacement.
• Un role="heading" sans aria-level. Le test 9.1.3 demande les deux attributs ensemble, et la spécification WAI-ARIA 1.2 rend aria-level obligatoire sur ce rôle. Une balise h1 à h6 reste plus simple : la note technique du critère la dit préférable. L’outil le relève par adresse comme dans un code collé.

Un titre de plus de 120 caractères est aussi relevé, comme point à examiner. Le glossaire cite les balises h utilisées « à seule fin de créer un effet typographique » parmi les usages interdits par le critère 8.9 : un paragraphe mis en gras par un h3 en est l’exemple courant.

Le RGAA, le standard HTML et le référencement ne disent pas la même chose

Le standard HTML est plus strict que le RGAA sur un point : un titre ne doit descendre que d’un niveau à la fois par rapport au précédent, et au moins un titre devrait être de niveau 1. Une page qui saute du h2 au h4 n’est donc pas conforme au HTML, même si elle peut l’être au RGAA. Remonter de plusieurs niveaux, du h4 au h2, est permis partout.

Côté référencement, le guide de démarrage de Google dit qu’un ordre sémantique des titres sert les lecteurs d’écran, mais que leur ordre ne compte pas pour la recherche Google, et qu’il n’y a pas de nombre idéal de titres. Les règles qu’on lit souvent, un seul h1 obligatoire, au moins deux h2, ne viennent ni du RGAA ni de Google.

Ce que lit l’outil

Par adresse, la page est ouverte dans Chromium, sur notre serveur, scripts compris. Les titres et leur nom viennent de l’arbre d’accessibilité du navigateur, celui que reçoivent les lecteurs d’écran : le texte d’une image par son alt, un aria-label à la place du texte. Chaque titre est rangé dans un de ces trois cas :

• lu et affiché ;
• lu mais masqué à l’écran, par exemple un h2 « Navigation principale » réservé aux lecteurs d’écran. Le glossaire le considère comme présent : il compte dans le plan ;
• présent dans le code mais pas lu comme titre : retiré de la lecture par display: none, hidden ou aria-hidden="true", ou lu comme simple texte quand un role, comme role="presentation" ou role="button", lui ôte son rôle de titre. Il n’entre pas dans le plan, ni dans le calcul des sauts.

Par adresse, les titres des composants web (shadow DOM ouvert) sont lus ; ils ne le sont pas dans un code collé. Dans les deux modes, les titres des iframes ne sont pas lus, et l’analyse s’arrête aux 500 premiers titres, ce que le résultat indique.

Pour un code collé, rien ne quitte votre navigateur. Sans les feuilles de style, l’outil ne voit pas une classe qui masque un titre : seuls l’attribut hidden, aria-hidden, noscript et un display: none ou visibility: hidden écrit dans l’attribut style le retirent de la lecture, ainsi qu’un details fermé, comme le fait le navigateur. Un role autre que heading sur une balise h1 à h6, comme role="presentation", lui retire son rôle de titre : son texte est lu, mais plus comme un titre. L’outil ne lit pas non plus le texte ajouté en CSS par ::before.

Corriger un plan de titres

• Partez du contenu, pas de l’aspect : un titre est un titre parce qu’il annonce une section. La taille se règle en CSS, sur n’importe quel niveau.
• Dans un CMS, cherchez l’origine des titres vides et des niveaux inattendus dans le thème : widgets de barre latérale, pied de page et blocs réutilisables y posent souvent des h2 ou des h4 sans rapport avec la page.
• Lisez la liste « Les titres, dans l’ordre du code » comme une table des matières : si elle ne permet pas de comprendre la page, la hiérarchie n’est pas pertinente, avec ou sans saut.
• Confirmez avec un lecteur d’écran : NVDA affiche la liste des titres avec NVDA+F7 (Insert+F7 par défaut), VoiceOver sur Mac avec le rotor (Ctrl+Option+U).

Sources

RGAA 4.1.2, critère 9.1 (information structurée par des titres) ; RGAA 4.1.2, glossaire : Titre ; RGAA 4.1.2, critère 8.9 (balises utilisées à des fins de présentation) ; RGAA 4.1.2, glossaire : Uniquement à des fins de présentation ; WCAG 2.1, critère de succès 1.3.1 Info and Relationships, en anglais ; WCAG 2.1, critère de succès 2.4.6 Headings and Labels, en anglais ; Technique H42 des WCAG : titres codés en h1 à h6, en anglais ; HTML Living Standard : titres et plan du document, en anglais ; WAI-ARIA 1.2 : le rôle heading, en anglais ; Guide de l’utilisateur de NVDA : liste des éléments (NVDA+F7) ; Apple, utiliser le rotor de VoiceOver sur Mac ; Google Search Central, guide de démarrage du référencement .

Page mise à jour le 11 novembre 2026.