Navigation

En accessibilité web, la navigation regroupe tous les mécanismes qui permettent de se déplacer dans un site : menu principal, moteur de recherche, plan du site, fil d'Ariane. Les WCAG exigent au moins deux de ces systèmes sur chaque ensemble de pages, pour couvrir les différentes façons dont les utilisateurs parcourent un site.

Un utilisateur de lecteur d'écran arrive sur votre page. Avant d'atteindre le premier mot de contenu, il parcourt le logo, les liens du menu, le sous-menu, les icônes de réseaux sociaux. Sur certains sites, cela représente 40 à 50 tabulations. Un lien « Aller au contenu principal » lui aurait épargné tout ce parcours.

#Plus qu'un menu

Le mot « navigation » va au-delà du menu en haut de page. Le critère 2.4.5 des WCAG (niveau AA) exige au moins deux systèmes pour localiser une page au sein d'un site. Le RGAA y consacre sa thématique 12 et liste les mécanismes acceptés : menu de navigation, plan du site, moteur de recherche.

Chacun de ces systèmes répond à un profil différent. Un utilisateur voyant clique dans le menu. Un utilisateur de lecteur d'écran saute de landmark en landmark. Un utilisateur avec des troubles cognitifs tape un mot dans le champ de recherche.

#<nav>, labels et lien d'évitement

En HTML, la balise <nav> crée automatiquement un landmark « navigation » pour les technologies d'assistance. Quand une page contient plusieurs zones de navigation, chacune a besoin d'un label distinct :

<nav aria-label="Menu principal">
  <ul>...</ul>
</nav>
<nav aria-label="Fil d'Ariane">
  <ol>...</ol>
</nav>

Sans aria-label, le lecteur d'écran annonce « navigation » deux fois. L'utilisateur ne sait pas laquelle choisir.

Le critère 2.4.1 des WCAG (niveau A) demande un mécanisme pour contourner les blocs répétés. La solution standard : un lien d'évitement placé en premier élément focusable, visible au focus.

<a href="#contenu" class="skip-link">
  Aller au contenu principal
</a>

#Les erreurs que personne ne corrige

La plus fréquente : un <div> à la place de <nav>. Le rendu visuel est identique. Les lecteurs d'écran, eux, ne détectent aucun landmark.

Autre piège : masquer le skip link avec display: none. Les utilisateurs clavier ne l'atteignent jamais. Préférez un positionnement hors écran qui se réinitialise au focus (position: absolute combiné à :focus).

Le critère 3.2.3 des WCAG impose que les éléments de navigation apparaissent dans le même ordre sur chaque page. Un menu qui se réorganise d'une page à l'autre désoriente les utilisateurs qui comptent sur leur mémoire spatiale.

#En résumé

Utilisez <nav> avec un aria-label descriptif pour chaque zone de navigation. Ajoutez un lien d'évitement visible au focus. Proposez au moins deux systèmes de navigation sur votre site. Gardez le même ordre de menu partout.