<nav>
Proposer un menu de navigation, et toutes les navigations ne se valent pas
<nav> — La navigation
La balise <nav> identifie un bloc de liens de navigation. Elle est réservée aux navigations principales : menu du site, table des matières, fil d'Ariane. Pas pour chaque groupe de liens.
Quand l'utiliser
Tu veux marquer la navigation principale de ton site, une navigation secondaire (fil d'Ariane, pagination), ou une table des matières. Quand tu as plusieurs <nav>, distingue-les avec aria-label.
Ce que tu gagnes
Accessibilité : chaque <nav> crée un navigation landmark. Les utilisateurs de lecteurs d'écran peuvent lister toutes les navigations et sauter à celle qu'ils veulent.
Exemple de code
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li aria-current="page">Current article</li>
</ol>
</nav>Pour aller plus loin
- Pose la souris — naviguer sans souris, pourquoi c'est indispensable
- Put down the mouse — the English version
- WHATWG —
<nav> - W3C — ARIA navigation landmark
- MDN —
<nav>