navigation

Quand l’utiliser

Utilisez <nav>. L’élément regroupe un ensemble de liens de navigation — nav principale du site, table des matières en page, fil d’Ariane, liens de pied de page, pagination. Chaque <nav> est exposé comme repère de navigation.

Contrairement à banner et main, plusieurs repères de navigation par page sont normaux et attendus. L’en-tête comporte une nav « Principale » ; l’article comporte une nav « Sur cette page » ; le pied de page comporte une nav « Plan du site ».

role="navigation" sur une <div> n’est approprié que lorsque vous ne pouvez pas utiliser <nav> (CMS hérité).

Tout ce qui « navigue » n’est pas une nav. Une liste de trois liens au milieu d’un paragraphe n’est que du texte — l’envelopper dans un <nav> créerait du bruit. Réservez <nav> aux collections importantes de liens que les utilisateurs exploitent réellement pour naviguer.

Quand étiqueter

Dès que vous avez plus d’un repère de navigation sur la page (ce qui est presque toujours le cas), chacun DOIT avoir un nom accessible distinct via aria-label ou aria-labelledby. Sinon, le menu des repères du lecteur d’écran affiche trois entrées « navigation » indiscernables.

Étiquettes conventionnelles : « Principale », « Secondaire », « Pied de page », « Fil d’Ariane », « Pagination », « Sur cette page », « Liens d’évitement ».

Échecs courants

• Plusieurs éléments <nav> sans étiquette. Indiscernables dans le menu des repères.
• Envelopper un seul lien dans un <nav> — usage excessif ; utilisez simplement <a>.
• aria-label="Navigation" — redondant. Le rôle est déjà « navigation » ; les lecteurs d’écran annoncent « Navigation, navigation ». Utilisez une étiquette significative comme « Principale » ou « Fil d’Ariane ».
• Nav principale rendue avec role="menu" ou role="menubar". La nav du site n’est pas un menu d’application — consultez la page menu.
• Nav fil d’Ariane sans aria-label="Breadcrumb". La convention exige l’étiquette pour que le rôle soit reconnu.

Exemple

<header>
  <nav aria-label="Primary">
    <a href="/toolkit/">Toolkit</a>
    <a href="/library/">Library</a>
  </nav>
</header>

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/toolkit/">Toolkit</a></li>
    <li aria-current="page">Standards</li>
  </ol>
</nav>