navigation

Kiedy stosować

Używaj <nav>. Element ten opakowuje zestaw łączy nawigacyjnych — główną nawigację serwisu, wbudowany spis treści strony, ścieżkę nawigacyjną (breadcrumb), łącza w stopce, paginację. Każdy <nav> jest eksponowany jako punkt orientacyjny nawigacji.

W odróżnieniu od banner i main, wiele punktów orientacyjnych nawigacji na stronie jest normą i jest oczekiwane. Nagłówek ma nawigację „Główna”; artykuł ma nawigację „Na tej stronie”; stopka ma nawigację „Mapa serwisu”.

role="navigation" na elemencie <div> jest właściwe tylko wtedy, gdy nie można użyć <nav> (np. starszy CMS).

Nie wszystko, co „nawiguje”, jest elementem nav. Lista trzech łączy w środku akapitu to po prostu tekst — owijanie jej w <nav> tworzyłoby zbędny szum. Zachowaj <nav> dla głównych kolekcji łączy, po których użytkownicy rzeczywiście się przemieszczają.

Kiedy dodawać etykietę

Gdy na stronie jest więcej niż jeden punkt orientacyjny nawigacji (a prawie zawsze jest), każdy MUSI mieć unikalną dostępną nazwę przez aria-label lub aria-labelledby. W przeciwnym razie menu punktów orientacyjnych czytnika ekranu pokazuje trzy wpisy „nawigacja” i użytkownik nie może ich odróżnić.

Konwencjonalne etykiety: „Główna”, „Pomocnicza”, „Stopka”, „Ścieżka nawigacyjna”, „Paginacja”, „Na tej stronie”, „Pomiń łącza”.

Częste błędy

• Wiele elementów <nav> bez etykiet. Nierozróżnialne w menu punktów orientacyjnych.
• Owijanie pojedynczego łącza w <nav> — nadmierne; wystarczy <a>.
• aria-label="Navigation" — redundantne. Rola to już „navigation”; czytniki ekranu ogłaszają „Nawigacja, nawigacja”. Używaj znaczącej etykiety jak „Główna” lub „Ścieżka nawigacyjna”.
• Główna nawigacja renderowana jako role="menu" lub role="menubar". Nawigacja serwisu nie jest menu aplikacji — zob. stronę menu.
• Nawigacja breadcrumb bez aria-label="Breadcrumb". Konwencja wymaga etykiety, aby rola została rozpoznana.

Przykład

<header>
  <nav aria-label="Główna">
    <a href="/toolkit/">Toolkit</a>
    <a href="/library/">Library</a>
  </nav>
</header>

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Strona główna</a></li>
    <li><a href="/toolkit/">Toolkit</a></li>
    <li aria-current="page">Standardy</li>
  </ol>
</nav>