Damit die Struktur einer Navigation technisch verständlich bleibt, sollte sie mit den dafür vorgesehenen HTML-Elementen ausgezeichnet werden. Semantisches HTML beschreibt, welche Bedeutung die Bestandteile der Navigation besitzen. Dieselbe HTML-Struktur kann dann als horizontale Seitenleiste, Sidebar oder Dropdown dargestellt werden, die Struktur ist also nicht dafür verantwortlich, wie die Navigation aussieht.
Navigationsbereiche
Das HTML-Element <nav> kennzeichnet einen Bereich, dessen wesentlicher Zweck die Navigation innerhalb eines Dokuments zu anderen Dokumenten ist. Typische Beispiele sind die Hauptnavigation, ein Inhaltsverzeichnis oder eine Breadcrumb-Navigation. Nicht jede Ansammlung von Links muss automatisch in einem <nav> stehen. Eine Seite kann gleichzeitig mehrere Navigationsbereiche enthalten. Neben der globalen Navigation können beispielsweise eine lokale Navigation und ein Inhaltsverzeichnis existieren.
Sind mehrere Navigationsbereiche vorhanden, sollten sie voneinander unterscheidbar sein. Dafür kann eine sichtbare Überschrift mit aria-labelledby oder aria-label verwendet werden, wenn keine Überschrift vorhanden ist. Da das <nav>-Element bereits die Landmark-Rolle navigation besitzt, ist ein zusätzliches role="navigation" nicht notwendig. Ein einfaches Beispiel für mehrere Menüs auf einer Seite ist:
<nav aria-label="Hauptnavigation">
...
</nav>
<nav aria-label="Inhaltsverzeichnis">
...
</nav>Die semantische Unterscheidung ist insbesondere für assistive Technologien wie Screenreader relevant, da Landmark-Regionen gezielt angesteuert werden können. Mehrere Informationen zu ARIA und Landmarks behandeln wir im Kapitel “Screenreader”.
Menüs als Listen
Da Navigationspunkte in der Regel eine zusammengehörende Gruppe sind, empfiehlt es sich, die Struktur eines Navigationsmenüs als Liste umzusetzen. Für die meisten Menüs eignet sich eine ungeordnete Liste mit <ul> und <li>. Ist die Reihenfolge von Bedeutung, kann auch eine geordnete Liste mit <ol> verwendet werden.
<nav aria-label="Hauptnavigation">
<ul>
<li><a href="/struktur/">Struktur</a></li>
<li><a href="/benennung/">Benennung</a></li>
<li><a href="/navigation/">Navigation</a></li>
<li><a href="/umsetzung/">Umsetzung</a></li>
<li><a href="/barrierefreiheit/">Barrierefreiheit</a></li>
</ul>
</nav>Durch die Liste wird verdeutlicht, dass die Links Bestandteile eines gemeinsamen Navigationssystems sind und unterstützt assistive Technologien dabei, die Anzahl der enthaltenen Elemente zu ermitteln. Verschachtelte Navigationen lassen sich entsprechend ihrer Hierarchie abbilden, indem ungeordnete Listen innerhalb des zugehörigen Listeneintrags angeordnet werden.
Link oder Button?
Die Elemente, die in einer Navigation angeordnet werden, erfüllen unterschiedliche Aufgaben: Ein Link verweist auf ein Ziel (beispielsweise eine andere Seite oder einen Abschnitt), während ein Button eine Aktion innerhalb der aktuellen Oberfläche auslöst. Ein Element, dessen einzige Aufgabe es ist, das zugehörige Untermenü ein- und auszublenden, ist eine interaktive Steuerung und sollte dementsprechend als Button umgesetzt werden.
<a href="/leistungen">Leistungen</a>
<button type="button">
Untermenü öffnen
</button>Die Wahl sollte sich also an der gewünschten Funktion orientieren. Das Aussehen ist dafür nicht von Bedeutung, da ein Link bei Bedarf wie ein Button und ein Button wie ein Link gestaltet werden kann, ohne seine semantische Bedeutung zu verändern. Wie Buttons für das Öffnen von Untermenüs um zusätzliche Zustandsinformationen ergänzt werden, behandeln wir im Kapitel “Zustände & Interaktion”.
Struktur vor Darstellung
Semantische Struktur und visuelle Darstellung sollten möglichst unabhängig voneinander funktionieren. Eine Liste von Links kann durch CSS horizontal, vertikal oder als Teil eines komplexen Menüs dargestellt werden, ohne dass dafür die inhaltliche Bedeutung verändert werden muss.
Das wird besonders bei responsiven Navigationen relevant, denn die Darstellung kann sich abhängig vom verfügbaren Platz deutlich verändern, während die Reihenfolge, Bezeichnungen und Ziele der Navigation möglichst konsistent bleiben. Die technische Umsetzung folgt somit idealerweise der bereits entwickelten Informationsarchitektur.
Informationsarchitektur → Navigationsstruktur → Semantisches HTML → Visuelle Darstellung und Interaktion
Zusammenfassung
Eine robuste Navigation beginnt mit ihrer semantischen Struktur. <nav> kennzeichnet relevante Navigationsbereiche, Listen bilden zusammengehörige Navigationspunkte und Links beziehungsweise Buttons beschreiben unterschiedliche Funktionen innerhalb des Systems. Die semantische Struktur sollte nicht von einer bestimmten visuellen Darstellung abhängig sein. Dieselbe Navigation kann unterschiedlich gestaltet und an verschiedene Situationen angepasst werden, ohne dass ihre grundlegende Struktur verloren geht.
Quellen
- Menu Structure. W3C Web Accessibility Initiative (WAI). Abgerufen am 13.09.2026.
- Landmark Regions. W3C Web Accessibility Initiative (WAI). Abgerufen am 13.09.2026.
- <nav> HTML-Navigationsbereichselement. MDN Web Docs. Abgerufen am 13.09.2026.