Navigation

Allgemeine Komponente

Eine gut strukturierte Navigation hilft Nutzer:innen, Inhalte schnell zu finden und sich sicher auf einer Website zu bewegen. Sie sollte klar benannt, logisch aufgebaut und leicht verständlich sein. Zudem muss sie vollständig per Tastatur und Screenreader bedienbar bleiben.

Die Relevanz von Barrierefreiheit verstehen

Die korrekte Auszeichnung von Navigationspunkten – unabhängig davon, in welcher Hierarchie sie stehen – ist besonders wichtig für eine barrierefreie Website. Screenreader müssen zuverlässig erkennen können, ob es sich um einen einfachen Navigationslink oder um einen Menüpunkt mit Untermenü handelt. Das folgende Video zeigt exemplarisch, wie NVDA in Firefox unterschiedliche Hierarchiestufen und Untermenüs vorliest und damit Nutzer:innen eine klare Orientierung innerhalb der Navigation ermöglicht.

Video der Harvard University IT über die Ausgabe von Navigationspunkten mit NVDA und Firefox

Was muss beachtet werden?

Deutsches Gesetz: Anforderungen der Konformitätsstufe A und AA müssen umgesetzt werden.

Hohe Priorität

Auf kleinen Viewports wird die Navigation häufig als Burger-Menü dargestellt. Für diese Umsetzung sind zusätzliche Maßnahmen erforderlich, um die Barrierefreiheit sicherzustellen.
Bei der Umsetzung einer versteckten Navigation sind folgende Punkte zu beachten:
ARIA-Attribute setzen: Mit aria-expanded und aria-controls sollte die Beziehung zwischen dem Button und dem zu öffnenden Navigationselement hergestellt werden. Der Wert von aria-expanded muss aktualisiert werden, sobald die Navigation geöffnet oder geschlossen wird.
Navigation verstecken: Die Navigation sollte nicht nur visuell, sondern auch für assistive Technologien ausgeblendet sein. Beispielsweise reicht die Verwendung von opacity: 0 nicht aus.
Zugängliche Labels für den Button: Der Toggle-Button sollte entweder über sichtbaren Text oder ein aria-label eindeutig beschriftet sein.
Code-Beispiel für die Umsetzung einer versteckten Navigation
...
aria-hidden auf SVG's

aria-hidden="true" wird auf SVGs gesetzt, wenn sie rein dekorativ sind und keine inhaltliche Information für Nutzer:innen von assistiven Technologien liefern. Dadurch ignorieren Screenreader das SVG und konzentrieren sich auf die tatsächlich relevanten Inhalte. Ohne aria-hidden könnten Screenreader versuchen, das SVG zu interpretieren, was zu unnötiger Verwirrung oder redundanten Informationen führen kann.
Weitere Informationen:
- Menus (Inclusive Components)
Hohe Priorität

Eine Flyout-Navigation zeigt Untermenüs nur beim Hover oder Klick an. Für Barrierefreiheit muss sichergestellt sein, dass alle Menüpunkte auch per Tastatur erreichbar und für Screenreader zugänglich sind.
Bei Flyout-Navigationen werden beim Hover oder Fokus auf einen Menüpunkt weitere Untermenüpunkte angezeigt. Dabei muss besonders darauf geachtet werden, dass auch Nutzer:innen, die die Tastatur verwenden, diese Untermenüs problemlos erreichen und bedienen können.

Verzögerung beim Schließen des Flyouts

Menschen mit motorischen Einschränkungen haben möglicherweise Schwierigkeiten, ein Flyout-Menü präzise zu bedienen. Eine Verzögerung beim Schließen des Flyouts kann in diesem Fall helfen, die Navigationselemente sicherer anzusteuern.
Code-Beispiel für das HTML einer Flyout Navigation (Quelle: Maria korneeva - Barrierefreie Webentwicklung)
Hautpnavigation

Home

My profile

Settings
let menuItemsWithSubmenu = document.querySelectorAll("li.has-submenu"); menuItemsWithSubmenu.forEach((el) => { let timer; let link = el.firstElementChild; const expandMenu = () => { el.classList.add("open"); if (link) link.setAttribute("aria-expanded", "true"); clearTimeout(timer); } const collapseMenu = () => { timer = setTimeout(function(event) { el.classList.remove("open"); if (link) link.setAttribute("aria-expanded", "false"); }, 1000); } ["mouseover", "focusin"].forEach((event) => el.addEventListener(event, expandMenu, false); ); ["mouseout", "focusout"].forEach((event) => el.addEventListener(event, collapseMenu, false); ); });

Code-Beispiel für das JavaScript einer Flyout Navigation (Quelle: Maria korneeva - Barrierefreie Webentwicklung)
let menuItemsWithSubmenu = document.querySelectorAll("li.has-submenu"); menuItemsWithSubmenu.forEach((el) => { let timer; let link = el.firstElementChild; const expandMenu = () => { el.classList.add("open"); if (link) link.setAttribute("aria-expanded", "true"); clearTimeout(timer); } const collapseMenu = () => { timer = setTimeout(function(event) { el.classList.remove("open"); if (link) link.setAttribute("aria-expanded", "false"); }, 1000); } ["mouseover", "focusin"].forEach((event) => el.addEventListener(event, expandMenu, false); ); ["mouseout", "focusout"].forEach((event) => el.addEventListener(event, collapseMenu, false); ); });
Zusätzlicher Button zum öffnen von Untermenü

Ein Untermenü sollte sich nicht automatisch beim Fokussieren eines Oberpunkts per Tastatur öffnen, da dies dazu führen würde, dass Nutzer:innen sich durch alle Unterpunkte navigieren müssten. Besser ist es, einen separaten Button einzubauen, der das Untermenü gezielt öffnet.
<nav aria-labelledby="headline"> <h2 id="headline" class="visually-hidden">Hautpnavigation</h2> <ul> <li><a aria-current="page" href="/">Home</a></li> <li class="has-submenu"> <a href="/my-profile"> My profile </a> <button aria-expanded="false" aria-controls="my-profile-subnav"> <svg aria-hidden="true">...</svg> <span class="visually-hidden"> Submenu for my profile </span> </button> <ul id="my-profile-subnav"> <li><a href="/my-profile/settings">Settings</a></li> </ul> </li> </ul> </nav>

Code-Beispiel für das HTML einer Flyout Navigation per Button (Quelle: Maria korneeva - Barrierefreie Webentwicklung)
Hautpnavigation

Home

My profile

Settings
let menuItemsWithSubmenu = document.querySelectorAll("li.has-submenu"); menuItemsWithSubmenu.forEach((menuItem) => { const button = menuItem.querySelector("button"); let isMenuExpanded = false; const expandMenu = () => { menuItem.classList.add("open"); button.setAttribute("aria-expanded", "true"); } const collapseMenu = () => { menuItem.classList.remove("open"); menuItem.setAttribute("aria-expanded", "false"); isMenuExpanded = false; } button.addEventListener("click" => () => { isMenuExpanded ? collapseMenu() : expandMenu(); }); });

Code-Beispiel für das JavaScript einer Flyout Navigation per Button (Quelle: Maria korneeva - Barrierefreie Webentwicklung)
let menuItemsWithSubmenu = document.querySelectorAll("li.has-submenu"); menuItemsWithSubmenu.forEach((menuItem) => { const button = menuItem.querySelector("button"); let isMenuExpanded = false; const expandMenu = () => { menuItem.classList.add("open"); button.setAttribute("aria-expanded", "true"); } const collapseMenu = () => { menuItem.classList.remove("open"); menuItem.setAttribute("aria-expanded", "false"); isMenuExpanded = false; } button.addEventListener("click" => () => { isMenuExpanded ? collapseMenu() : expandMenu(); }); });
Weitere Informationen:
- Menus (Inclusive Components)
AA

Moderate Priorität
Eine Seite innerhalb einer Anwendung muss über verschiedene Navigationswege erreichbar sein.
Die meisten Seiten auf einer Webseite sind über die Navigationsleiste erreichbar. Die WCAG sehen jedoch vor, dass es unterschiedliche Wege geben muss, wie alle Seiten einer Website erreichbar sind. Dazu gibt es folgende Möglichkeiten:
Navigationsleiste auf allen Seiten
Links zu verwandten Seiten
Inhaltsverzeichnisse (Sitemaps)
Suchfunktionen
Nicht jede:r User:in nutzt die Navigation

Diese Richtlinie zielt darauf ab, dass nicht alle Nutzer:innen die gleichen Navigationswege nutzen. So bevorzugen Personen, die beispielsweise kognitive Beeinträchtigungen haben, eher eine Sitemap. Personen mit visuellen Beeinträchtigungen empfinden oft eine Suchfunktion als besonders hilfreich.
Weitere Informationen:
- Understanding Multiple Ways (WCAG)
AA

Moderate Priorität
Wiederkehrende Navigationselemente müssen auf allen Seiten in derselben relativen Reihenfolge erscheinen.
Wiederkehrende Navigationselemente (wie <header>, <nav>, <aside> oder <footer>) müssen auf allen Seiten in derselben relativen Reihenfolge erscheinen. Sie sollten außerdem einheitliche Bezeichnungen, Funktionen und Markups haben.
Dadurch können sich Nutzer:innen leichter auf einer Seite orientieren und schneller zu relevanten Inhalten springen.
WCAG-Richtlinien:
- 3.2.3 Consistent Navigation
- 3.2.4 Consistent Identification
AAA

Niedrige Priorität
Eine wichtige Information für alle Nutzer:innen ist, an welcher Stelle der Seite sie sich gerade befinden.
Um in der Navigation anzuzeigen, auf welcher Seite sich die Nutzer:in gerade befindet, kann das ARIA-Attribut aria-current verwendet werden. aria-current kann viele unterschiedliche Werte annehmen, allerdings sind page, true und false in der Navigation die von höchster Bedeutung.
page kennzeichnet die aktuelle Seite in einer Navigation.
true wird allgemein verwendet, um das aktuelle Element zu markieren. Dieser Wert kann zum Beispiel für einen Oberpunkt genutzt werden, um anzuzeigen, dass einer seiner Unterpunkte aktuell mit page ausgezeichnet ist.
false zeigt an, dass das Element nicht aktuell ist und ist der Standardwert.
Code-Beispiel zur korrekten Auszeichnung von Navigationslinks
Team

Contact
Nutzung von Listen

In der Navigation sollten die Navigationspunkte je nach Anwendungsfall in einer geordneten oder ungeordneten Liste angegeben werden. Assistive Technologien, wie der Screenreader, kündigen die Anzahl der einzelnen Listeneinträge zusätzlich an. Dadurch bekommen die Nutzer:innen einen Überblick über den Umfang der Navigation.
Weitere Informationen:
- aria-current (MDN)
- 2.4.8 Position (W3C)
AAA

Niedrige Priorität
Breadcrumbs helfen Nutzer:innen, ihre aktuelle Position auf der Seite zu erkennen und ermöglichen eine schnelle Navigation zu übergeordneten Bereichen.
Für die Breadcrumbs zählen die gleichen Regeln wie für die eigentliche Hauptnavigation. Auch hier müssen ARIA-Attribute wie aria-current eingesetzt werden.

Auszeichnung von Breacrumb-Navigation mit einem Namen

Laut WCAG 1.3.6 Identify Purpose sollten mehrfach verwendete Landmarks, wie z. B. <nav>-Elemente, einen zugänglichen Namen erhalten. Dies kann über die Attribute aria-label oder aria-labelledby erfolgen, um die Elemente für alle Nutzer:innen eindeutig zu kennzeichnen.
Code-Beispiel für eine Breadcrumb-Navitation
Breadcrumbs

Home

Settings

Zuletzt aktualisiert am 12.12.25

Navigation

Die Relevanz von Barrierefreiheit verstehen

Wie werden Navigationspunkte mit Untermenüs von Screenreadern angekündigt?

Was muss beachtet werden?

Versteckte Navigation

Flyout Naviation

Seite auf unterschiedliche Wege erreichbar AA

Wiederkehrende Navigationselemente AA

Nutzung von aria-current AAA

Breadcrumbs AAA

AA

AA

AAA

AAA