Navigation accessible : landmarks, liens d'évitement et structure

La navigation : un enjeu majeur d'accessibilité

La thématique 12 du RGAA consacre 14 critères à la navigation, ce qui en fait la thématique la plus fournie avec la présentation. Une navigation accessible permet à tous de parcourir votre site efficacement, quel que soit le mode d'interaction (souris, clavier, lecteur d'écran, commande vocale).

Landmarks ARIA (Critère 9.2)

Les landmarks définissent les zones principales de votre page. Ils permettent aux utilisateurs de lecteurs d'écran de naviguer rapidement entre les sections.

<body>
  <header role="banner">
    <nav role="navigation" aria-label="Menu principal">
      ...
    </nav>
  </header>

  <main role="main">
    <article>...</article>
  </main>

  <aside role="complementary">
    ...
  </aside>

  <footer role="contentinfo">
    <nav aria-label="Liens légaux">...</nav>
  </footer>
</body>

Lien d'évitement (Critère 12.7)

Un lien d'évitement permet aux utilisateurs clavier de sauter directement au contenu principal.

<body>
  <a href="#main-content" class="skip-link">
    Aller au contenu principal
  </a>
  <header>...</header>
  <main id="main-content" tabindex="-1">...</main>
</body>

<style>
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 1000;
  padding: 1rem;
  background: #000;
  color: #fff;
}
.skip-link:focus {
  top: 0;
}
</style>

Deux systèmes de navigation (Critère 12.1)

Chaque ensemble de pages doit proposer au moins deux systèmes de navigation parmi :

Menu de navigation principal
Plan du site
Moteur de recherche
Fil d'Ariane

Ordre de tabulation (Critère 12.8)

L'ordre de tabulation doit suivre l'ordre logique du contenu. Évitez d'utiliser tabindex avec des valeurs positives.

<!-- BON : ordre naturel -->
<nav>
  <a href="/">Accueil</a>
  <a href="/services">Services</a>
  <a href="/contact">Contact</a>
</nav>

<!-- MAUVAIS : tabindex positif qui casse l'ordre -->
<a href="/contact" tabindex="1">Contact</a>
<a href="/" tabindex="3">Accueil</a>

Piège au clavier (Critère 12.9)

Aucun composant ne doit piéger le focus clavier. L'utilisateur doit toujours pouvoir naviguer avec Tab et Shift+Tab.

Les modales doivent pouvoir être fermées avec Échap
Le focus doit être piégé dans la modale (pas en dehors) mais relâché à sa fermeture
Les menus déroulants doivent être navigables au clavier

Focus visible (Critère 10.7)

<!-- MAUVAIS : supprime le focus -->
*:focus { outline: none; }

<!-- BON : focus personnalisé visible -->
*:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

Checklist navigation RGAA

Critère	Vérification	Impact
9.2	Landmarks présents (header, nav, main, footer)	Modéré
12.1	Au moins 2 systèmes de navigation	Sérieux
12.7	Lien d'évitement présent	Modéré
12.8	Ordre de tabulation cohérent	Sérieux
12.9	Pas de piège au clavier	Critique
10.7	Focus visible sur tous les éléments interactifs	Sérieux