Série RGAA en pratique · Épisode 11 · 8 min

Naviguer sans se perdre

Comment donner des repères de navigation à un site, pour les personnes qui parcourent la page au clavier.

Publié le 7 octobre 2026.Consulter la transcription de la vidéo Voir sur YouTube (nouvelle fenêtre)

Chapitres

Transcription

Texte intégral de la narration de l’épisode.

Situations du quotidien

Ferme les yeux et imagine que tu navigues au clavier, sans souris. Tu arrives sur une page : pour atteindre le contenu, tu dois d’abord traverser tout le menu principal, lien par lien, avec la touche Tab. Vingt, trente tabulations. Puis tu cliques vers une autre page, et rebelote, le même menu à retraverser en entier. C’est épuisant, et pourtant fréquent. En France, environ 5 % des personnes ont une restriction de mobilité et parcourent la page au clavier, d’après la DREES. Le RGAA consacre une thématique entière à ça, la navigation. Son but : te donner des repères pour aller vite et savoir où tu es.

Des repères pour ne pas se perdre

La thématique navigation regroupe plusieurs idées, et on va en retenir trois principales. La première : dans chaque page, un lien d’évitement doit permettre de sauter directement au contenu principal, sans retaper tout le menu. C’est le critère 12.7. La deuxième : les grandes zones de la page, en-tête, navigation, contenu, pied de page, doivent pouvoir être atteintes ou évitées, grâce à des repères de structure. C’est le critère 12.6. La troisième : un site doit offrir au moins deux façons différentes de trouver une page, par exemple un menu et un moteur de recherche, ou un menu et un plan du site. C’est le critère 12.1. Et par-dessus tout ça, le menu doit rester cohérent d’une page à l’autre, le critère 12.2.

Au premier Tab, un raccourci apparaît

Voici le lien d’évitement en action. Au chargement, il est invisible, pour ne pas encombrer le design. Mais dès la toute première tabulation, avant même le premier élément du menu, il surgit en haut de l’écran : aller au contenu principal. L’utilisateur appuie sur Entrée, et le focus saute directement à la zone de contenu, en zappant tout le menu. Le critère 12.7 accepte que ce lien soit masqué au départ, à une condition : qu’il devienne visible quand il reçoit le focus. Un lien d’évitement caché en permanence, avec un display none par exemple, ne compte pas : il doit apparaître au clavier, être fonctionnel, et pointer vers le contenu.

Masqué au repos, visible au focus

En code, le lien d’évitement tient en deux morceaux. D’abord le lien lui-même, tout en haut du corps de page, qui pointe vers un identifiant, par exemple dièse main. Ensuite, la zone de contenu qui porte cet identifiant, en général la balise main avec l’id main. Le piège, c’est la façon de le masquer. Si tu utilises display none, tu le retires complètement, y compris du parcours clavier, il ne sert plus à rien. La bonne technique, c’est une classe qui déplace visuellement le lien hors de l’écran au repos, puis le ramène à l’écran quand il reçoit le focus, avec un style sur la pseudo-classe focus. Le lien existe toujours pour le clavier, il devient juste visible au bon moment.

Des balises qui nomment les zones

Deuxième repère, la structure de la page. À gauche, tout est en div avec des classes : header, nav, content, footer. Visuellement c’est identique, mais pour un lecteur d’écran, ce ne sont que des boîtes anonymes. À droite, on utilise les balises de structure du HTML : header pour l’en-tête, nav pour la navigation, main pour le contenu principal, footer pour le pied de page. Ces balises créent ce qu’on appelle des repères, ou landmarks. Leur intérêt : un lecteur d’écran peut lister toutes les zones d’un coup et sauter directement à celle qu’il veut, le contenu principal par exemple. C’est exactement ce que demande le critère 12.6, chaque grande zone doit pouvoir être atteinte ou évitée. Petit plus, quand tu as plusieurs nav, donne à chacune un nom avec aria-label, pour les distinguer.

Le clavier doit suivre la lecture

Se repérer, c’est aussi une question d’ordre. Quand tu tabules dans une page, le focus doit suivre l’ordre de lecture, de haut en bas, de gauche à droite. À gauche, un formulaire dont l’ordre de tabulation part dans tous les sens : le focus saute du nom au message, puis remonte à l’e-mail. Au clavier, tu perds complètement le fil. À droite, l’ordre suit la lecture, champ après champ, sans surprise. C’est le critère 12.8. Le plus souvent, il suffit de garder l’ordre du code source aligné sur l’ordre visuel, et d’éviter les tabindex positifs qui forcent un parcours artificiel.

Savoir où l’on est, à chaque instant

Et pour ne pas se perdre en naviguant, il faut voir où est le focus. À gauche, un lien qui reçoit bien le focus au clavier, mais dont l’indicateur a été supprimé en CSS, avec un outline none. Résultat, tu tabules à l’aveugle, tu ne sais plus quel élément est actif. À droite, un anneau de focus net et contrasté suit chaque élément atteint. C’est le critère 10.7 : tu peux tout à fait personnaliser le style du focus, mais tu ne dois jamais le faire disparaître sans le remplacer par un repère visible. C’est ton point de repère permanent au clavier.

Plusieurs chemins, et un fil d’Ariane

Dernier volet, s’orienter dans l’ensemble du site. Le critère 12.1 demande au moins deux systèmes de navigation différents : par exemple un menu et un moteur de recherche, ou un menu et un plan du site. Ça laisse à chacun sa méthode préférée. Le moteur de recherche, quand il existe, doit être au même endroit sur toutes les pages, c’est le critère 12.5, et le plan du site doit refléter fidèlement l’architecture, c’est le critère 12.3. Ajoute à ça un fil d’Ariane, comme accueil, produits, vélos, vélo de ville : il n’est pas obligatoire, mais il aide énormément à savoir où l’on se trouve. Une bonne pratique, marquer la page courante dans ce fil avec l’attribut aria-current page, pour que le lecteur d’écran l’annonce.

Checklist

Récapitulons en cinq repères. Un, place un lien d’évitement en haut de chaque page, masqué au repos mais visible au focus, qui saute au contenu, critère 12.7. Deux, structure la page avec de vrais landmarks, header, nav, main, footer, pour que chaque zone soit atteignable ou évitable, critère 12.6. Trois, offre au moins deux systèmes de navigation, par exemple un menu et une recherche, critère 12.1. Quatre, garde un ordre de tabulation qui suit l’ordre de lecture, sans saut, critère 12.8. Et cinq, ne masque jamais le focus, et garde ton menu à la même place d’une page à l’autre, critères 10.7 et 12.2. Cinq repères, et personne ne se perd plus dans ton site.

CTA

À toi de jouer. Range la souris, et parcours une page uniquement avec la touche Tab. Un lien d’évitement apparaît-il dès le premier appui ? Vois-tu clairement où est le focus à chaque étape ? Peux-tu retrouver une même page par deux chemins différents ? Pour analyser la structure d’une page et repérer les repères de navigation manquants, rends-toi sur rgaa-checker.com.

Approfondir dans le guide

Cet épisode aborde ces critères du RGAA 4.1.2. Ouvre leur fiche pour la méthode de test détaillée, les cas particuliers et les exemples.

Passer à l’action

La vidéo pose le cadre. Pour repérer des pistes d’amélioration sur un site réel, lance une analyse ou explore le guide des 106 critères.

Analyser un site Guide RGAA