Qu'est-ce que Balise nav ?
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 marche ?
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'Impact Business
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.
Bonnes pratiques vs Erreurs communes
- ✅ À faire : 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.
- ❌ À é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.
Prompt IA
Contexte : page avec [menu principal, footer avec liens, fil d’Ariane, menu secondaire]. Génère la structure HTML avec <nav> et aria-label pour chaque bloc. Ajoute un skip link « Aller au contenu » pointant vers [id du main]. Indique l’ordre de tabulation recommandé et comment annoncer chaque nav aux lecteurs d’écran.