RGAA 9.1 — Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?

Hiérarchie des titres mal structurée

Le problème

La hiérarchie des titres (h1 à h6) est la colonne vertébrale de la structure d'une page web pour les technologies d'assistance. Le critère 9.1 du RGAA exige que les titres soient utilisés de manière pertinente et hiérarchiquement cohérente pour structurer l'information. Les utilisateurs de lecteurs d'écran s'appuient massivement sur les titres pour naviguer dans une page : ils utilisent des raccourcis clavier (touche H sous JAWS et NVDA) pour sauter de titre en titre et parcourir la page comme une table des matières. Les problèmes de structure de titres les plus courants sont nombreux. L'absence de h1 prive la page de son titre principal. La présence de plusieurs h1 crée une confusion sur le sujet principal de la page. Les sauts de niveaux (passer de h2 à h4 sans h3) brisent la hiérarchie logique et désorientent l'utilisateur. L'utilisation de titres à des fins purement visuelles (un h3 utilisé parce que la taille de police convient, pas parce que le contenu est un sous-titre de niveau 3) produit une structure sémantique incohérente. Les titres manquants sont aussi un problème : une section de contenu importante sans titre n'apparaît pas dans la navigation par titres du lecteur d'écran et peut être totalement ignorée. Les CMS comme WordPress génèrent souvent des problèmes de hiérarchie de titres quand les auteurs de contenu utilisent les niveaux de titre pour le formatage visuel plutôt que pour la structure. Un article dont le contenu saute de h2 à h5 parce que l'auteur voulait un texte plus petit est un exemple typique. La solution passe par l'éducation des contributeurs et la mise en place de gabarits de contenu qui guident la structuration des titres.

Votre site a-t-il ce problème ?

106 critères RGAA analysés en 5 minutes par notre IA.

Testez votre site gratuitement

Impact sur les utilisateurs

Les utilisateurs de lecteurs d'écran naviguent dans les pages web comme si elles étaient des documents structurés. Ils affichent la liste des titres (raccourci Insert+F7 sous JAWS) et sautent directement au titre qui les intéresse. Si la hiérarchie est incohérente, cette navigation est impossible. Un saut de h2 à h5 fait croire au lecteur d'écran (et à l'utilisateur) qu'il manque des sections intermédiaires. Un h1 manquant prive l'utilisateur de l'information sur le sujet principal de la page. Des titres utilisés pour le style créent un bruit qui noie les vrais titres de section. Les moteurs de recherche utilisent aussi la hiérarchie des titres pour comprendre la structure du contenu. Un h1 bien rédigé et une hiérarchie cohérente améliorent le référencement. Les personnes ayant des troubles cognitifs bénéficient aussi d'une structure claire : les titres leur permettent de scanner rapidement le contenu et de trouver l'information pertinente sans lire l'intégralité de la page.

Exemple de code

Avant (non conforme)
<div class="page">
  <!-- Pas de h1 -->
  <h3>Nos services</h3>
  <p>Description des services...</p>
  <h5>Conseil</h5>
  <p>Description du conseil...</p>
  <h2>À propos</h2>
  <h4>Notre équipe</h4>
  <p>Description de l'équipe...</p>
</div>
Après (conforme)
<div class="page">
  <h1>Agence de conseil en accessibilité</h1>
  <h2>Nos services</h2>
  <p>Description des services...</p>
  <h3>Conseil</h3>
  <p>Description du conseil...</p>
  <h2>À propos</h2>
  <h3>Notre équipe</h3>
  <p>Description de l'équipe...</p>
</div>

Questions fréquentes

Peut-on avoir plusieurs h1 dans une même page ?
Le RGAA ne l'interdit pas explicitement, mais la bonne pratique est d'avoir un seul h1 par page qui décrit le sujet principal. La spécification HTML5 avait introduit la possibilité de h1 multiples dans des éléments sectionnants (article, section) mais cette fonctionnalité n'a jamais été implémentée par les lecteurs d'écran et est désormais déconseillée.
Peut-on sauter un niveau de titre (h2 puis h4) ?
Non. Le RGAA exige une hiérarchie de titres cohérente, sans saut de niveau. Après un h2, le prochain titre de niveau inférieur doit être un h3, pas un h4 ou h5. Les sauts de niveaux désorientent les utilisateurs de lecteurs d'écran qui s'attendent à une structure logique. Si vous voulez un texte plus petit, utilisez CSS pour changer la taille, pas un niveau de titre inférieur.
Comment styler un titre sans changer son niveau ?
Utilisez CSS pour contrôler l'apparence visuelle des titres indépendamment de leur niveau sémantique. Par exemple, un h2 peut être stylé pour ressembler visuellement à un h4 avec une classe CSS : <h2 class="text-lg">Titre</h2>. Le niveau sémantique (h2) reste correct pour la structure, tandis que la classe CSS contrôle la taille et le style visuel.
Les titres masqués visuellement comptent-ils dans la hiérarchie ?
Oui. Un titre masqué visuellement avec la classe sr-only est invisible à l'écran mais fait partie de la hiérarchie des titres pour les lecteurs d'écran. C'est une technique utile pour ajouter des titres de section qui manquent visuellement (par exemple, un titre « Navigation principale » au-dessus du menu). Ces titres masqués doivent respecter la hiérarchie comme les titres visibles.

Votre site a-t-il ce problème ?

Scrutia audite votre site sur 106 critères RGAA en 5 minutes. Navigation clavier, composants ARIA, focus visible, contrastes, et bien plus.

Lancer un audit gratuit