Das nav-Element: Navigation mit Ansage

vom 30.05.2024 von Oliver Misch

Das <nav> markiert einen Block mit Navigationslinks: das Hauptmenü, Breadcrumbs, ein Inhaltsverzeichnis. Der Gewinn ist unsichtbar, aber real: Screenreader kündigen den Bereich als Navigation an und bieten an, direkt hinzuspringen oder ihn zu überspringen. Wer schonmal eine Seite mit vierzig Menülinks vorgelesen bekommen hat, weiß was das wert ist.

Syntax und Beispiel

HTML-Code

<nav aria-label="Hauptnavigation">
    <ul>
        <li><a href="/">Start</a></li>
        <li><a href="/tutorial/">Tutorial</a></li>
        <li><a href="/glossar/">Glossar</a></li>
    </ul>
</nav>

Die Linkliste innen als ul zu bauen ist üblich und sinnvoll: Hilfstechnik sagt dann sogar an wie viele Punkte das Menü hat. Optisch wird daraus mit Flexbox ein horizontales Menü, im HTML bleibt es eine ehrliche Liste.

Mehrere Navigationen auseinanderhalten

Eine Seite darf mehrere nav-Elemente haben, etwa Hauptmenü plus Breadcrumbs. Damit man sie unterscheiden kann, bekommt jede ein aria-label: "Hauptnavigation", "Pfadnavigation", "Fußzeilen-Links". Genau so macht es diese Website hier übrigens auch, ein Blick in den Quelltext lohnt sich.

Nicht jede Linkliste ist eine nav

Das nav ist für die wesentlichen Navigationsblöcke gedacht. Drei weiterführende Links am Ende eines Artikels oder die Linksammlung im Fußbereich brauchen kein eigenes nav, sonst verliert die Auszeichnung ihren Witz. Faustregel: Würdest du den Block jemandem am Telefon als "das Menü" beschreiben, ist es eine nav. Wenn nicht, reicht eine schlichte Listte.

Typische Fehler

• Jede Handvoll Links in ein nav wickeln, siehe oben.
• Das nav vergessen und das Menü in ein nacktes div packen. Funktioniert optisch, verschenkt aber die Sprungmarken für Hilfstechnik.
• Links ohne echte Ziele, also href-lose a-Elemente als Menüpunkte. Details dazu auf der a-Seite.

Mehrere Navigationen auf einer Seite

Eine Seite darf beliebig viele nav-Elemente haben, und genau dann wird das aria-label wichtig, damit Screenreader sie unterscheiden können:

<nav aria-label="Hauptnavigation">...</nav>
<nav aria-label="Brotkrumen">...</nav>
<nav aria-label="Fußzeilen-Links">...</nav>

Genau so macht es dieses Wiki: Hauptmenü, Brotkrumenpfad und Fußzeile sind drei getrennte, beschriftete Navigationen. Die Ansage im Vorleseprogramm lautet dann "Navigation, Brotkrumen" statt dreimal nur "Navigation", ein Wort Unterschied, viel gewonnene Orientierungg.

Was NICHT in ein nav muss

Nicht jede Linksammlung ist eine Navigation: Weiterführende Links am Artikelende, Quellenangaben oder die Linkliste in einem Blogbeitrag sind schlicht Inhalt und brauchen kein nav. Das Element ist für die wesentlichen Navigationsblöcke der Seite reserviert, inflationär eingesetzt verliert es seinen Wert, wenn alles Navigation ist, hilft der Sprungbefehl zur Navigation niemandem mehr. Die Faustregel: Würdest du den Block im Gespräch "das Menü" oder "die Navigation" nennen? Dann nav, sonst nichtt.

Verwandt: Semantisches HTML · ul · Tutorial: Navigation erstellen