Rolle Landmarke

`navigation`

Ein Landmark, das eine Gruppe von Navigationslinks zusammenfasst — Hauptnavigation, Breadcrumb, Inhaltsverzeichnis. Das <nav>-Element trägt diese Rolle automatisch. Mehrere navs pro Seite sind üblich und zulässig, aber jede muss einen eindeutigen zugänglichen Namen haben.

Verwendung

Es sollte <nav> verwendet werden. Das Element umschließt eine Sammlung von Navigationslinks — Hauptnavigation der Seite, seiteninternes Inhaltsverzeichnis, Breadcrumbs, Footer-Links, Paginierung. Jedes <nav> wird als Navigations-Landmark bereitgestellt.

Anders als banner und main sind mehrere Navigations-Landmarks pro Seite normal und erwünscht. Der Header enthält eine „Primäre“ Navigation; der Artikel hat eine „Auf dieser Seite“-Navigation; der Footer hat eine „Seitenübersicht“-Navigation.

role="navigation" auf einem <div> ist nur dann angemessen, wenn <nav> nicht verwendet werden kann (z. B. in einem Legacy-CMS).

Nicht alles, was „navigiert“, ist eine Navigation. Eine Liste aus drei Links mitten in einem Absatz ist einfach Text — sie in <nav> einzuwickeln würde unnötigen Lärm erzeugen. <nav> sollte für größere Link-Sammlungen reserviert werden, durch die Nutzer tatsächlich navigieren.

Wann Beschriftungen erforderlich sind

Wenn mehr als ein Navigations-Landmark auf der Seite vorhanden ist — was fast immer der Fall ist — MUSS jeder einen eindeutigen zugänglichen Namen über aria-label oder aria-labelledby haben. Andernfalls zeigt das Landmark-Menü des Screenreaders drei Einträge mit der Bezeichnung „Navigation“ an, und die Nutzer können sie nicht unterscheiden.

Gebräuchliche Bezeichnungen: „Primär“, „Sekundär“, „Footer“, „Breadcrumb“, „Paginierung“, „Auf dieser Seite“, „Skip-Links“.

Häufige Fehler

Mehrere <nav>-Elemente ohne Beschriftungen. Im Landmark-Menü nicht zu unterscheiden.
Einen einzelnen Link in <nav> einzuwickeln — übertrieben; ein einfaches <a> genügt.
aria-label="Navigation" — redundant. Die Rolle lautet bereits „navigation“; Screenreader kündigen „Navigation, Navigation“ an. Es sollte eine aussagekräftige Bezeichnung wie „Primär“ oder „Breadcrumb“ verwendet werden.
Die Hauptnavigation als role="menu" oder role="menubar" ausgeführt. Eine Seitennavigation ist kein Anwendungsmenü — dazu mehr auf der Menü-Seite.
Eine Breadcrumb-Navigation ohne aria-label="Breadcrumb". Die Konvention schreibt diese Bezeichnung vor, damit die Rolle erkannt wird.

Beispiel

<header>
  <nav aria-label="Primär">
    <a href="/toolkit/">Toolkit</a>
    <a href="/library/">Bibliothek</a>
  </nav>
</header>

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