RGAA 9.2 — Dans chaque page web, la structure du document est-elle cohérente ?

Pas de régions landmark

Le problème

L'absence de régions landmark signifie que la page n'utilise pas les éléments HTML5 sémantiques (<main>, <nav>, <header>, <footer>, <aside>) ni les rôles ARIA correspondants (role="main", role="navigation", role="banner", role="contentinfo") pour définir les grandes zones de la page. Le critère RGAA 9.2 (correspondant au WCAG 1.3.1, niveau A) exige que la structure du document soit cohérente et que les zones de la page soient identifiables.

Les landmarks permettent aux utilisateurs de lecteurs d'écran de naviguer rapidement entre les grandes zones de la page : sauter directement au contenu principal (<main>), accéder à la navigation (<nav>), aller au pied de page (<footer>). Sans landmarks, l'utilisateur doit parcourir le contenu linéairement, sans possibilité de sauter des sections.

Ce problème est courant sur les sites qui utilisent uniquement des <div> pour structurer la page, sans jamais employer les éléments HTML5 sémantiques. Les sites construits avant HTML5 ou générés par des outils anciens sont particulièrement affectés. Même les sites modernes omettent parfois l'élément <main> ou utilisent plusieurs <nav> sans les distinguer par un aria-label.

Impact sur les utilisateurs

Pour les utilisateurs de lecteurs d'écran, les landmarks sont un outil de navigation essentiel. NVDA (touche D), JAWS (touche R), VoiceOver (rotor) permettent de lister et naviguer entre les landmarks. Sans landmarks, cette fonctionnalité est vide et l'utilisateur perd un moyen de navigation majeur.

Concrètement, un utilisateur de lecteur d'écran qui arrive sur une page veut souvent aller directement au contenu principal. Avec un landmark <main>, il y accède en une touche. Sans landmark, il doit tabuler à travers toute la navigation, les publicités et les barres latérales avant d'atteindre le contenu.

Les landmarks sont complémentaires au lien d'évitement (critère 12.7). Le lien d'évitement bénéficie à tous les utilisateurs de clavier, tandis que les landmarks bénéficient spécifiquement aux utilisateurs de lecteurs d'écran. Les deux sont nécessaires.

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)

<!-- Page sans landmarks -->
<div class="header">
  <div class="logo">Mon Site</div>
  <div class="nav">
    <a href="/">Accueil</a>
    <a href="/blog">Blog</a>
  </div>
</div>
<div class="content">
  <div class="sidebar">...</div>
  <div class="main">
    <h1>Bienvenue</h1>
    <p>Contenu principal...</p>
  </div>
</div>
<div class="footer">
  <p>© 2025</p>
</div>

Après (conforme)

<!-- Page avec landmarks sémantiques -->
<header>
  <div class="logo">Mon Site</div>
  <nav aria-label="Navigation principale">
    <a href="/">Accueil</a>
    <a href="/blog">Blog</a>
  </nav>
</header>
<div class="content">
  <aside aria-label="Barre latérale">...</aside>
  <main>
    <h1>Bienvenue</h1>
    <p>Contenu principal...</p>
  </main>
</div>
<footer>
  <p>© 2025</p>
</footer>

Comment Scrutia détecte ce problème

Scrutia vérifie la présence des landmarks essentiels sur chaque page : <main> (ou role="main"), <nav> (ou role="navigation"), <header> (ou role="banner"), et <footer> (ou role="contentinfo"). Il s'assure qu'il n'y a qu'un seul <main> et que les <nav> multiples sont distingués par un aria-label. Le rapport liste les landmarks manquants et propose le balisage sémantique correct.

Questions fréquentes

Quels landmarks sont obligatoires ?

Au minimum, chaque page devrait avoir : un <main> pour le contenu principal, un <header> pour l'en-tête, une <nav> pour la navigation principale, et un <footer> pour le pied de page. L'élément <main> est le plus important car c'est la cible du lien d'évitement.

Peut-on avoir plusieurs <nav> ?

Oui, mais chaque <nav> doit être distingué par un aria-label descriptif : <nav aria-label='Navigation principale'>, <nav aria-label='Navigation secondaire'>, <nav aria-label='Fil d'Ariane'>. Sans aria-label, les lecteurs d'écran les annoncent tous comme « navigation » sans distinction.

Faut-il ajouter role='main' si on utilise déjà <main> ?

Non. Les éléments HTML5 sémantiques (<main>, <nav>, <header>, <footer>, <aside>) ont un rôle ARIA implicite. Ajouter role='main' à un élément <main> est redondant. Les rôles ARIA explicites ne sont nécessaires que sur les <div> quand on ne peut pas utiliser les éléments HTML5.

Les landmarks sont-ils un remplacement du lien d'évitement ?

Non. Les landmarks sont accessibles uniquement via les lecteurs d'écran. Les utilisateurs de clavier sans lecteur d'écran ne peuvent pas naviguer par landmarks. Le lien d'évitement (Skip to content) est nécessaire en complément pour les utilisateurs de clavier voyants.

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