Définition technique
Élément sémantique HTML5 <nav> qui regroupe les liens de navigation principaux (menu principal, menu secondaire, fil d’Ariane). Plusieurs blocs <nav> par page sont autorisés ; il est recommandé de les identifier via aria-label pour les distinguer (ex. « Navigation principale », « Fil d’Ariane »). Les lecteurs d’écran peuvent proposer un saut direct vers la navigation ; les moteurs utilisent cette structure pour comprendre l’architecture du site. Les liens à l’intérieur de <nav> sont considérés comme des liens de navigation (parfois moins « prioritaires » que les liens dans le contenu pour le maillage interne). Un skip link « Aller au contenu » permet de sauter la nav principale pour les utilisateurs au clavier.
Comment ça fonctionne ?
Les blocs <nav> regroupent les liens de navigation (menu principal, fil d'Ariane, pagination). Plusieurs <nav> par page sont autorisées ; chaque bloc doit être identifié avec aria-label (ex. « Navigation principale », « Fil d'Ariane ») pour les lecteurs d'écran.
L'erreur classique à éviter
Mettre tous les liens du site dans une seule nav, ou utiliser des div à la place. Oublier les aria-label sur les nav multiples, ce qui rend la navigation confuse pour les utilisateurs de technologies d'assistance.
Impact business : pourquoi s'en soucier ?
La balise nav améliore l’accessibilité (navigation au clavier, annonces pour les lecteurs d’écran) et envoie un signal clair sur les zones de liens. Rester à des <div> ou <ul> sans sémantique fait perdre en clarté et en conformité aux bonnes pratiques. Une structure nav claire facilite l’audit accessibilité et le référencement (compréhension des zones de la page). Les bonnes pratiques WCAG recommandent d’identifier chaque bloc nav pour les utilisateurs de technologies d’assistance.
La règle d'or
Une <nav> par bloc de navigation (menu, breadcrumb, pagination). Toujours ajouter un aria-label distinct sur chaque nav. Proposer un skip link « Aller au contenu » pour sauter la nav principale.