Navigation cohérente et fil d'Ariane : la règle WCAG
En bref — un menu qui ne bouge pas, des noms qui ne changent pas
Un menu dont l'ordre change d'une page à l'autre, une icône « panier » qui se déplace ou qui s'appelle tantôt « Mon sac » tantôt « Caddie », un site où l'on ne peut trouver un produit que par une seule voie : pour une personne qui navigue au lecteur d'écran ou au clavier, ces incohérences font perdre le fil. L'European Accessibility Act (norme EN 301 549 / WCAG 2.1 AA), applicable au commerce électronique depuis le 28 juin 2025, exige :
- Une navigation cohérente : les éléments répétés apparaissent dans le même ordre sur toutes les pages (3.2.3, niveau AA) ;
- Une identification cohérente : une même fonction porte partout le même nom et la même icône (3.2.4, niveau AA) ;
- Plusieurs moyens d'accéder à une page : au moins deux chemins, par exemple un menu et une recherche, ou un plan du site (2.4.5, niveau AA) ;
- Des liens de navigation explicites, regroupés dans un repère
<nav>identifiable (2.4.4, niveau A · 1.3.1, niveau A).
La frontière à connaître : le fil d'Ariane qui indique « où je me trouve » dans l'arborescence relève du critère 2.4.8 (Localisation), de niveau AAA — une excellente pratique, mais recommandée, pas exigée. Ce qui est exigible, c'est que la navigation reste stable et nommée de la même façon partout, et qu'il existe plusieurs chemins vers vos produits.
On retient une navigation comme on retient le plan d'un magasin : une fois qu'on sait où est la caisse et où sont les rayons, on n'y repense plus. Mais si le plan change à chaque étage — la caisse déplacée, les panneaux renommés, une seule porte pour entrer — on se perd, et l'on finit par sortir. C'est exactement ce que vit une personne aveugle ou qui navigue au clavier quand le menu de votre boutique bouge de page en page. La bonne nouvelle : les règles WCAG sur la navigation tiennent en deux idées simples — rester cohérent et offrir plus d'un chemin. Voici comment les appliquer en e-commerce, où s'arrête l'obligation, et comment vérifier.
Pourquoi la cohérence de la navigation est une question d'accessibilité
Un visiteur voyant repère un menu d'un coup d'œil et le réutilise sans réfléchir. Une personne qui utilise un lecteur d'écran le parcourt élément par élément ; une personne qui navigue au clavier le traverse à la touche Tab ; une personne ayant un trouble cognitif s'appuie sur des repères stables pour ne pas se perdre. Pour toutes, la prévisibilité est ce qui rend un site utilisable : si le menu garde le même ordre et les mêmes noms partout, l'effort d'apprentissage se fait une fois ; s'il change à chaque page, il faut tout réapprendre à chaque fois.
L'EAA s'appuie sur l'EN 301 549, fondée sur les WCAG 2.1 niveau AA. Trois critères structurent la navigation : 3.2.3 (Navigation cohérente) — les mécanismes de navigation répétés sur plusieurs pages apparaissent dans le même ordre relatif ; 3.2.4 (Identification cohérente) — les composants qui ont la même fonction sont identifiés de manière cohérente ; et 2.4.5 (Plusieurs moyens) — il existe plus d'une façon d'atteindre une page au sein du site. À cela s'ajoutent des fondations de niveau A : des liens explicites (2.4.4) et une structure de page où la zone de navigation est un vrai repère (1.3.1).
Les 6 règles pour une navigation cohérente et accessible
La navigation répétée ne doit pas se réorganiser de page en page
Les éléments présents sur plusieurs pages — barre de navigation principale, recherche, liens du pied de page — doivent apparaître dans le même ordre relatif à chaque fois. L'utilisateur peut les masquer ou les replier (un menu mobile, par exemple), mais leur séquence ne doit pas être rebattue arbitrairement. Concrètement : si « Boutique » précède « À propos » sur l'accueil, il en va de même sur la fiche produit et au moment du paiement.
→ Voir aussi la structure des titres et des repères.
Une même action = un même libellé et une même icône
Un composant qui remplit la même fonction sur plusieurs pages doit être identifié de la même manière : même libellé, même icône, même nom accessible. Si le panier s'appelle « Panier » en haut de l'accueil, il ne doit pas devenir « Mon sac » ailleurs ; un bouton « Ajouter au panier » ne doit pas s'intituler « Acheter » sur une autre fiche s'il fait la même chose. Pour les boutons en icône seule (loupe, panier, compte), donnez-leur partout le même nom accessible (aria-label identique).
aria-label="Rechercher" ; le bouton d'ajout dit toujours « Ajouter au panier ».→ Voir aussi les libellés de liens et boutons.
Au moins deux façons d'atteindre une page
Le critère 2.4.5 demande qu'il existe plus d'une manière de localiser une page dans votre site. En e-commerce, c'est naturel : un menu de catégories et une recherche, ou bien un plan du site, des liens connexes (« Vous aimerez aussi »), des collections. Deux suffisent. La seule exception : une page qui est une étape d'un processus (le tunnel de paiement) n'a pas à être atteignable par plusieurs voies. Pensez aussi à la recherche : pour beaucoup d'utilisateurs de lecteurs d'écran, c'est le chemin le plus rapide vers un produit.
→ Voir aussi recherche, filtres et tri de produits accessibles.
Indiquer où l'on se trouve dans l'arborescence
Un fil d'Ariane (« Accueil › Chaussures › Baskets › ce produit ») aide tout le monde à se situer et à remonter d'un niveau. Soyons honnêtes : indiquer la position de l'utilisateur dans le site relève du critère 2.4.8 (Localisation), de niveau AAA — donc recommandé, pas exigé par l'EAA. Mais quand vous en posez un, faites-le proprement : enveloppez-le dans un <nav aria-label="Fil d'Ariane"> avec une liste ordonnée, et marquez la page courante avec aria-current="page". Évitez de transmettre la hiérarchie par le seul séparateur visuel : la structure de liste la rend perceptible au lecteur d'écran.
<nav aria-label="Fil d'Ariane"><ol>…<li aria-current="page">Baskets running</li></ol></nav>.<div>, sans repère ni page courante : le lecteur d'écran n'y voit qu'une rangée de liens.Faire savoir, sans la couleur seule, où l'on est
Quand une entrée du menu correspond à la page affichée, indiquez-le avec aria-current="page" : le lecteur d'écran annonce alors « page actuelle ». Comme toujours, ne signalez pas cet état par la seule couleur (un onglet juste un peu plus foncé est invisible pour beaucoup) : ajoutez un repère visible — soulignement, trait, libellé — en plus de l'attribut. C'est une aide à l'orientation qui complète la cohérence générale.
aria-current="page" et un soulignement net ; le reste du menu est inchangé.aria-current : ni perçue à l'œil par certains, ni annoncée au lecteur d'écran.→ Voir aussi le contraste et l'usage de la couleur.
Un vrai repère <nav>, et le moyen de le sauter
Regroupez vos liens de navigation dans un élément <nav> (avec aria-label si vous en avez plusieurs : « Principale », « Fil d'Ariane », « Pied de page »). Cela permet aux lecteurs d'écran de lister les repères et d'y sauter directement (1.3.1). Ajoutez en tête de page un lien d'évitement « Aller au contenu » pour qu'une personne au clavier n'ait pas à traverser tout le menu à chaque page (2.4.1). Enfin, des liens dont l'intitulé a du sens hors contexte — « Voir les baskets running » plutôt que « Cliquez ici » — complètent une navigation lisible (2.4.4).
<nav aria-label="Principale"> en tête, un lien « Aller au contenu » qui prend le focus en premier, des intitulés explicites.<div> de liens sans repère, sans lien d'évitement : 30 tabulations avant d'atteindre le premier produit, à chaque page.→ Voir aussi la navigation au clavier.
Récapitulatif : ce qui est exigible, ce qui est recommandé
| Point à vérifier | Niveau | Statut EAA |
|---|---|---|
| Navigation répétée dans le même ordre — 3.2.3 | AA | Exigé |
| Même fonction = même nom et même icône — 3.2.4 | AA | Exigé |
| Plusieurs moyens d'atteindre une page — 2.4.5 | AA | Exigé |
| Liens explicites hors contexte — 2.4.4 | A | Exigé |
| Zone de navigation balisée & lien d'évitement — 1.3.1 / 2.4.1 | A | Exigé |
| Fil d'Ariane indiquant la position (2.4.8) | AAA | Recommandé |
aria-label pour la loupe, le panier, le compte — et le même libellé visible pour les actions répétées.
Comment vérifier la cohérence de votre navigation
Quelques contrôles à faire sur l'ensemble de votre site :
- Comparez le menu sur trois pages différentes (accueil, fiche produit, page d'aide) : l'ordre des entrées est-il identique ?
- Listez vos fonctions récurrentes (recherche, panier, compte) : portent-elles partout le même nom et la même icône ?
- Comptez les chemins vers une catégorie : y a-t-il au moins deux moyens de l'atteindre (menu, recherche, plan du site) ?
- Parcourez au lecteur d'écran (NVDA, VoiceOver) : la liste des repères de navigation est-elle claire ? La page courante est-elle annoncée ?
- Tabulez depuis le haut : un lien « Aller au contenu » apparaît-il en premier ?
La cohérence se prête en partie à la détection automatique : un scanner repère l'absence de repère <nav>, un lien sans intitulé, un bouton-icône sans nom accessible ou un aria-current mal formé. En revanche, savoir si le menu garde le même ordre entre les pages ou si une fonction est nommée de deux façons demande une comparaison de page à page, qui se fait à l'œil et au lecteur d'écran. Notre rapport signale les manquements détectables sur la page analysée et liste les points de cohérence à vérifier sur l'ensemble du site.
→ Méthode complète : comment tester l'accessibilité de son site. Voir aussi par où commencer.
Vérifiez l'accessibilité de votre boutique gratuitement
DeclareAccess analyse une page de votre site avec le moteur axe-core selon les WCAG 2.1 AA, repère les manquements (repères de navigation, étiquettes, contraste, structure…) et génère la déclaration d'accessibilité prête à publier — modèle français (RGAA), allemand (BFSG), italien ou espagnol. Gratuit, sans carte bancaire.
Rapport WCAG par e-mail sous 24 h ouvrées.
C'est noté. Votre client e-mail va s'ouvrir avec la demande pré-remplie — il vous suffit de l'envoyer.
Questions fréquentes
Mon menu peut-il être différent sur mobile et sur ordinateur ?
Oui. Le critère 3.2.3 demande la cohérence de l'ordre relatif des éléments répétés, pas une présentation identique sur tous les écrans. Un menu peut être replié dans un bouton « hamburger » sur mobile et déployé sur ordinateur : ce qui compte, c'est qu'une fois ouvert, l'ordre des entrées reste le même que sur les autres pages du même format, et que les fonctions gardent les mêmes noms.
Le fil d'Ariane est-il obligatoire pour être conforme à l'EAA ?
Non. Indiquer la position de l'utilisateur dans l'arborescence relève du critère 2.4.8 (Localisation), de niveau AAA : c'est recommandé, pas exigé par l'EAA, qui s'aligne sur le niveau AA. Ce qui est exigible, c'est la cohérence de la navigation (3.2.3 / 3.2.4) et l'existence de plusieurs chemins (2.4.5). Cela dit, un fil d'Ariane bien balisé est très utile et peu coûteux : une bonne pratique à adopter.
Que veut dire « plusieurs moyens » d'atteindre une page ?
Le critère 2.4.5 demande au moins deux façons distinctes de localiser une page dans le site : par exemple un menu de catégories et une recherche, ou un plan du site, ou des liens connexes. En e-commerce, combiner un menu et une recherche suffit généralement. Seule exception : une page qui n'est qu'une étape d'un processus (le tunnel de paiement) n'a pas besoin d'être atteignable par plusieurs voies.
Comment signaler la page active dans le menu ?
Ajoutez aria-current="page" sur l'entrée du menu correspondant à la page affichée : le lecteur d'écran annonce « page actuelle ». N'indiquez pas cet état par la seule couleur — ajoutez un repère visible (soulignement, trait). C'est une aide à l'orientation qui complète la cohérence générale du menu.
Un scan automatique détecte-t-il les problèmes de navigation ?
En partie. Un outil repère l'absence de repère <nav>, un lien sans intitulé, un bouton-icône sans nom accessible ou un aria-current mal formé. Mais vérifier que le menu garde le même ordre d'une page à l'autre, ou qu'une fonction n'est pas nommée de deux façons, demande une comparaison de page à page qui se fait à l'œil et au lecteur d'écran. Notre rapport combine le détectable automatiquement et la liste des points de cohérence à contrôler.