RGAA 12.2 — Dans chaque ensemble de pages, le menu de navigation principal est-il toujours à la même place ?

Navigation non cohérente entre les pages

Le problème

Une navigation incohérente se produit lorsque les mécanismes de navigation (menu principal, barre latérale, fil d'Ariane, liens de pied de page) changent d'emplacement, d'ordre ou de présentation d'une page à l'autre au sein d'un même site. Le critère RGAA 12.2 (correspondant au WCAG 3.2.3, niveau AA) exige que les mécanismes de navigation qui se répètent sur un ensemble de pages apparaissent dans le même ordre relatif à chaque occurrence, sauf si l'utilisateur initie un changement.

Les violations courantes incluent : un menu principal qui est horizontal sur la page d'accueil mais vertical dans les pages internes, des liens de navigation dont l'ordre change entre les pages, des éléments qui apparaissent ou disparaissent sans raison dans le menu, et un fil d'Ariane qui est présent sur certaines pages mais pas d'autres.

Ce problème est fréquent sur les sites dont les pages sont construites à partir de templates différents sans cohérence dans la structure de navigation. Les refontes partielles de sites créent aussi des incohérences quand les nouvelles pages utilisent un layout différent des anciennes.

Impact sur les utilisateurs

Pour les utilisateurs de lecteurs d'écran qui mémorisent la structure de navigation d'un site, une navigation incohérente est profondément déstabilisante. Ils s'attendent à trouver le menu au même endroit et dans le même ordre sur chaque page. Quand la navigation change de position ou d'ordre, ils perdent leurs repères et doivent réapprendre la structure de chaque page.

Les personnes ayant des troubles cognitifs dépendent fortement de la cohérence pour naviguer. Un menu qui change de place les oblige à chercher la navigation sur chaque page, augmentant la charge cognitive et le risque de confusion.

Les utilisateurs de clavier qui ont mémorisé le nombre de Tab nécessaire pour atteindre un lien de navigation sont aussi perturbés quand l'ordre change. Ce critère est fondamental pour la prévisibilité de l'interface, un principe clé de l'utilisabilité.

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 d'accueil : menu horizontal -->
<header>
  <nav>
    <a href="/">Accueil</a>
    <a href="/services">Services</a>
    <a href="/blog">Blog</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

<!-- Page interne : ordre et éléments différents -->
<header>
  <nav>
    <a href="/contact">Contact</a>
    <a href="/services">Services</a>
    <a href="/">Accueil</a>
    <!-- Blog a disparu, l'ordre est différent -->
  </nav>
</header>

Après (conforme)

<!-- Template partagé : navigation identique partout -->
<header>
  <nav aria-label="Navigation principale">
    <a href="/">Accueil</a>
    <a href="/services">Services</a>
    <a href="/blog">Blog</a>
    <a href="/contact">Contact</a>
  </nav>
</header>
<!-- Ce même header est utilisé sur toutes les pages
     via un composant partagé (Layout, Header component) -->

Comment Scrutia détecte ce problème

Scrutia compare la structure de navigation entre toutes les pages auditées. Il vérifie que le menu principal apparaît au même emplacement dans le DOM, que les liens sont dans le même ordre, et que les éléments de navigation sont cohérents d'une page à l'autre. Il signale les différences d'ordre, les éléments manquants ou ajoutés, et les changements de position dans le layout.

Questions fréquentes

L'ordre exact des liens doit-il être identique ?

Oui. L'ordre relatif des éléments de navigation doit être le même sur toutes les pages. Des éléments peuvent s'ajouter (sous-menus spécifiques à une section), mais les éléments communs doivent garder le même ordre. Le lien « Accueil » ne peut pas être le premier sur une page et le dernier sur une autre.

Les sous-menus contextuels sont-ils autorisés ?

Oui. Un sous-menu qui change en fonction de la section visitée est acceptable tant que le menu principal garde le même ordre. Par exemple, une barre latérale dont le contenu change selon la rubrique ne viole pas ce critère tant que le menu principal en en-tête reste cohérent.

Comment assurer la cohérence dans un framework comme Next.js ?

Utilisez un composant Layout partagé qui inclut le header et la navigation. Toutes les pages qui utilisent ce layout auront automatiquement la même navigation. C'est l'approche recommandée dans tous les frameworks modernes (Next.js, Nuxt, Gatsby, Remix).

Le fil d'Ariane doit-il être sur toutes les pages ?

Si un fil d'Ariane est présent sur certaines pages, il devrait être présent sur toutes (sauf la page d'accueil, qui est généralement le point de départ). Sa position dans la page doit aussi être cohérente.

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