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

Hiérarchie des titres non respectée

Le problème

Une hiérarchie de titres incorrecte signifie que les niveaux de titres HTML (h1 à h6) ne sont pas utilisés dans un ordre logique et séquentiel. Le critère RGAA 9.1 (correspondant au WCAG 1.3.1, niveau A) exige que la structure des titres reflète fidèlement l'organisation du contenu. Sauter des niveaux (passer de h1 à h4), utiliser plusieurs h1 sur une même page, ou choisir les niveaux de titres uniquement pour leur apparence visuelle plutôt que pour leur signification sémantique sont des violations courantes.

Les lecteurs d'écran permettent aux utilisateurs de naviguer de titre en titre pour parcourir rapidement le contenu d'une page. C'est l'une des méthodes de navigation les plus utilisées : les enquêtes WebAIM montrent que 67,5% des utilisateurs de lecteurs d'écran naviguent par titres. Si la hiérarchie est incohérente, cette navigation devient confuse et inefficace.

Ce problème est fréquent sur les sites qui utilisent des frameworks CSS où les développeurs choisissent un niveau de titre en fonction de la taille de police souhaitée plutôt que de la structure sémantique du contenu. Il est aussi courant sur les pages construites avec des CMS où différents éditeurs ajoutent du contenu sans coordination de la structure des titres.

Impact sur les utilisateurs

Pour les utilisateurs de lecteurs d'écran, une hiérarchie de titres mal structurée compromet leur capacité à comprendre l'organisation de la page. Quand ils naviguent de titre en titre et passent de h2 à h5, ils ne savent pas s'ils ont manqué du contenu ou si la structure est simplement incohérente. Cela les oblige à lire le contenu linéairement, ce qui est beaucoup plus lent.

Les utilisateurs voyants qui utilisent des outils de navigation par titres (extensions de navigateur, lecteurs de flux) sont également affectés. Les moteurs de recherche utilisent aussi la hiérarchie des titres pour comprendre la structure et la pertinence du contenu, ce qui impacte le référencement.

L'absence de h1 ou la présence de plusieurs h1 est particulièrement problématique : le h1 doit identifier le sujet principal de la page. Sans lui, les utilisateurs de technologies d'assistance n'ont aucun point d'ancrage pour comprendre de quoi traite la page.

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

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

Testez votre site gratuitement

Exemple de code

Avant (non conforme)

<!-- Hiérarchie de titres cassée -->
<h1>Mon site web</h1>
<h1>Bienvenue</h1>  <!-- Double h1 -->
<h4>Nos services</h4>  <!-- Saut de h1 à h4 -->
<h2>À propos</h2>
<h5>Notre équipe</h5>  <!-- Saut de h2 à h5 -->
<h3>Contact</h3>

Après (conforme)

<!-- Hiérarchie de titres correcte -->
<h1>Bienvenue sur notre site</h1>
<h2>Nos services</h2>
  <h3>Développement web</h3>
  <h3>Design UX</h3>
<h2>À propos</h2>
  <h3>Notre équipe</h3>
  <h3>Notre histoire</h3>
<h2>Contact</h2>

Comment Scrutia détecte ce problème

Scrutia analyse la hiérarchie des titres de chaque page en extrayant tous les éléments h1-h6 et en vérifiant l'ordre séquentiel. Il signale les sauts de niveaux (ex. h2 suivi de h5), l'absence de h1, les h1 multiples et les titres utilisés uniquement pour leur style visuel. Le rapport présente un plan de la hiérarchie actuelle et suggère la correction appropriée.

Questions fréquentes

Peut-on avoir plusieurs h1 sur une même page ?

En HTML5, il est techniquement permis d'avoir plusieurs h1 dans des éléments sectionnants distincts (article, section). Cependant, en pratique, la plupart des technologies d'assistance ne supportent pas correctement ce modèle. Il est recommandé d'avoir un seul h1 par page qui identifie le sujet principal.

Les titres doivent-ils suivre un ordre strict ?

Oui. Chaque titre doit être au maximum un niveau en dessous du titre qui le précède. On peut remonter de plusieurs niveaux (de h4 à h2), mais on ne doit pas descendre de plus d'un niveau à la fois (de h2 à h4 est interdit). Il ne doit pas y avoir de « trous » dans la hiérarchie.

Comment styliser un titre sans changer son niveau ?

Utilisez des classes CSS pour contrôler l'apparence visuelle. Par exemple, un h2 peut avoir la classe .text-sm pour paraître petit, ou un h3 peut avoir la classe .text-2xl pour paraître grand. Séparez toujours la sémantique de la présentation.

Quel impact sur le SEO ?

Les moteurs de recherche utilisent la hiérarchie des titres pour comprendre la structure et les sujets principaux d'une page. Un h1 unique et pertinent, suivi d'une structure logique de h2/h3, améliore la compréhension du contenu et peut avoir un impact positif sur le positionnement.

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