navigation

Quando usarlo

Si utilizzi <nav>. L’elemento racchiude un insieme di link di navigazione — nav principale del sito, indice dei contenuti in-pagina, breadcrumb, link in footer, paginazione. Ogni <nav> è esposto come landmark di navigazione.

A differenza di banner e main, avere più landmark di navigazione per pagina è normale e atteso. L’intestazione ha un nav «Principale»; l’articolo ha un nav «In questa pagina»; il footer ha un nav «Mappa del sito».

role="navigation" su un <div> è appropriato solo quando non è possibile usare <nav> (CMS legacy).

Non tutto ciò che «naviga» è un nav. Un elenco di tre link nel mezzo di un paragrafo è semplice testo — racchiuderlo in <nav> genererebbe rumore. Si riservi <nav> alle raccolte principali di link che gli utenti utilizzano genuinamente per navigare.

Quando etichettare

Quando la pagina contiene più di un landmark di navigazione (il che avviene quasi sempre), ciascuno DEVE avere un nome accessibile distinto tramite aria-label o aria-labelledby. In caso contrario, nel menu dei landmark del screen reader compaiono tre voci «navigazione» e l’utente non riesce a distinguerle.

Etichette convenzionali: «Principale», «Secondaria», «Footer», «Breadcrumb», «Paginazione», «In questa pagina», «Skip links».

Errori comuni

• Più elementi <nav> privi di etichette. Indistinguibili nel menu dei landmark.
• Racchiudere un singolo link in <nav> — uso eccessivo; è sufficiente un <a>.
• aria-label="Navigation" — ridondante. Il ruolo è già «navigation»; i screen reader annuncerebbero «Navigazione, navigazione». Si utilizzi un’etichetta significativa come «Principale» o «Breadcrumb».
• Nav principale resa con role="menu" o role="menubar". La navigazione del sito non è un menu applicativo — si veda la pagina menu.
• Nav breadcrumb priva di aria-label="Breadcrumb". La convenzione richiede l’etichetta affinché il ruolo sia riconosciuto.

Esempio

<header>
  <nav aria-label="Principale">
    <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>