Blog

Was muss eine barrierefreie Navigation erfüllen?

Herausgegeben von Decareto

4 Minuten lesen

November 6, 2026

Eine barrierefreie Navigation muss für alle Nutzerinnen und Nutzer unabhängig von ihren körperlichen oder kognitiven Fähigkeiten vollständig bedienbar sein. Das bedeutet konkret: Alle Navigationselemente müssen per Tastatur erreichbar sein, eine klare Struktur aufweisen und mit Hilfstechnologien wie Screenreadern funktionieren. Die folgenden Abschnitte beantworten die wichtigsten Fragen rund um technische Anforderungen, rechtliche Vorgaben, typische Fehler und die Prüfung barrierefreier Navigation.

Welche technischen Anforderungen gelten für eine barrierefreie Navigation?

Eine barrierefreie Navigation muss tastaturgesteuert, screenreaderkompatibel und strukturell klar aufgebaut sein. Navigationsbereiche müssen im HTML-Code eindeutig ausgezeichnet sein, Fokuszustände sichtbar bleiben und die Reihenfolge der Elemente der visuellen Darstellung entsprechen. Nur so können Nutzerinnen und Nutzer mit Einschränkungen die Website selbstständig bedienen.

Im Einzelnen lassen sich die technischen Anforderungen in mehrere Bereiche unterteilen:

Tastaturbedienbarkeit: Alle Navigationspunkte, Dropdown-Menüs und Verlinkungen müssen ausschließlich mit der Tastatur erreichbar und aktivierbar sein. Der Fokus darf dabei nie in einer Komponente gefangen bleiben.
Sichtbarer Fokusindikator: Beim Navigieren per Tastatur muss jederzeit erkennbar sein, welches Element aktuell den Fokus hat. Ein ausreichender Farbkontrast des Fokusrahmens ist dabei ebenso wichtig wie dessen Größe.
Semantisch korrektes HTML: Navigation sollte mit dem <nav>-Element ausgezeichnet sein. Werden mehrere Navigationsbereiche verwendet, müssen diese über aria-label oder aria-labelledby unterscheidbar gemacht werden.
Logische Lesereihenfolge: Die Reihenfolge der Navigationselemente im HTML-Quellcode muss der sichtbaren Anordnung auf der Seite entsprechen, damit Screenreader-Nutzerinnen und -Nutzer die Seite in einer sinnvollen Abfolge erleben.
Ausreichende Farbkontraste: Texte in der Navigation müssen ein Kontrastverhältnis von mindestens 4,5:1 gegenüber dem Hintergrund aufweisen. Ein automatisierter Barrierefreiheitstest kann Kontrastprobleme in der Navigation zuverlässig identifizieren.
Überspringmechanismus: Seiten sollten einen sogenannten „Skip-Link“ bieten, der es ermöglicht, direkt zum Hauptinhalt zu springen und wiederholte Navigationselemente zu überspringen.

Besonders komplex wird es bei dynamischen Navigationselementen wie Mega-Menüs oder mobilen Hamburger-Menüs. Hier müssen ARIA-Attribute wie aria-expanded und aria-haspopup korrekt eingesetzt werden, damit assistive Technologien den aktuellen Zustand eines Menüs korrekt kommunizieren können.

Was schreiben WCAG, BITV und BFSG zur Navigation vor?

Die WCAG 2.2 definieren mehrere Erfolgskriterien, die direkt auf die Navigation anwendbar sind. Die BITV 2.0 übernimmt diese Anforderungen für den deutschen Rechtsraum, und das Barrierefreiheitsstärkungsgesetz (BFSG) macht sie ab 2025 für viele private Unternehmen verbindlich. Für Websites bedeutet das: Navigationselemente müssen wahrnehmbar, bedienbar, verständlich und robust umgesetzt sein.

Die relevanten WCAG-Erfolgskriterien für Navigation lassen sich wie folgt zusammenfassen:

Kriterium 2.1.1 (Tastatur, Level A): Alle Funktionen der Navigation müssen per Tastatur bedienbar sein.
Kriterium 2.4.1 (Blöcke umgehen, Level A): Es muss einen Mechanismus geben, um Navigationsblöcke zu überspringen.
Kriterium 2.4.3 (Fokus-Reihenfolge, Level A): Die Fokusreihenfolge muss sinnvoll und vorhersehbar sein.
Kriterium 2.4.7 (Fokus sichtbar, Level AA): Der Tastaturfokus muss jederzeit sichtbar sein.
Kriterium 3.2.3 (Konsistente Navigation, Level AA): Navigationsmechanismen, die auf mehreren Seiten vorkommen, müssen konsistent angeordnet sein.
Kriterium 4.1.2 (Name, Rolle, Wert, Level A): Alle Navigationselemente müssen programmatisch bestimmbare Rollen und Zustände haben.

Die BITV 2.0 gilt für öffentliche Stellen und orientiert sich vollständig an den WCAG-Kriterien auf Konformitätslevel AA. Das BFSG erweitert diese Pflichten auf viele Produkte und Dienstleistungen des privaten Sektors. Für Websites, die unter das BFSG fallen, ist die Einhaltung dieser Navigationsanforderungen keine Empfehlung mehr, sondern rechtliche Pflicht.

Welche Navigationsfehler führen zu BFSG-Verstößen?

Die häufigsten Navigationsfehler, die zu Verstößen gegen das BFSG und die zugrunde liegenden WCAG-Kriterien führen, sind fehlende Tastaturbedienbarkeit, nicht sichtbare Fokusindikatoren und unzureichend ausgezeichnete Navigationsbereiche. Diese Fehler betreffen besonders Nutzerinnen und Nutzer, die auf Screenreader oder Tastaturnavigation angewiesen sind.

Konkret treten folgende Fehler besonders häufig auf:

Kein Skip-Link vorhanden: Nutzerinnen und Nutzer, die per Tastatur navigieren, müssen bei jedem Seitenaufruf die gesamte Navigation durchlaufen, bevor sie zum Inhalt gelangen.
Fehlende oder inkorrekte ARIA-Attribute: Dropdown-Menüs, die ihren geöffneten oder geschlossenen Zustand nicht programmatisch kommunizieren, sind für Screenreader-Nutzerinnen und -Nutzer nicht nutzbar.
Versteckter oder fehlender Fokusindikator: Viele Designs unterdrücken den Standard-Fokusrahmen des Browsers aus ästhetischen Gründen, ohne einen alternativen Indikator bereitzustellen.
Nicht semantisch ausgezeichnete Navigation: Navigationsbereiche, die lediglich als <div> oder <ul> ohne <nav>-Wrapper umgesetzt sind, können von Screenreadern nicht als Navigation identifiziert werden.
Inkonsistente Navigation: Wenn Navigationselemente auf verschiedenen Unterseiten in unterschiedlicher Reihenfolge erscheinen, verlieren Nutzerinnen und Nutzer die Orientierung.
Unzureichende Farbkontraste: Navigationstexte oder aktive Zustände, die die Kontrastanforderungen nicht erfüllen, stellen ebenfalls einen Verstoß dar.

Wichtig: Nicht alle dieser Fehler lassen sich automatisiert erkennen. Ob Alternativtexte sinnvoll formuliert sind oder ob die Tastaturbedienung eines komplexen Menüs tatsächlich funktioniert, erfordert in vielen Fällen eine manuelle Prüfung ergänzend zum automatisierten Scan.

Wie lässt sich barrierefreie Navigation testen?

Das Testen barrierefreier Navigation erfordert eine Kombination aus automatisierten Tools und manuellen Prüfschritten. Automatisierte Tests können technische Fehler wie fehlende ARIA-Attribute, Kontrastprobleme und fehlende semantische Auszeichnung zuverlässig erkennen. Manuelle Tests sind zusätzlich notwendig, um zu prüfen, ob die Navigation auch in der Praxis für alle Nutzerinnen und Nutzer funktioniert.

Automatisiertes Testen der Navigation

Automatisierte Barrierefreiheitstools prüfen den HTML-Code jeder Seite auf Konformität mit den WCAG-Regeln. Schätzungen gehen davon aus, dass automatisierte Tests etwa 30 bis 50 Prozent aller Barrierefreiheitsprobleme aufdecken können. Für die Navigation bedeutet das: Fehlende <nav>-Elemente, unzureichende Farbkontraste, fehlende ARIA-Attribute und inkorrekte Fokus-Reihenfolgen im Quellcode lassen sich automatisiert identifizieren. Tools, die auf der Open-Source-Bibliothek axe-core basieren, haben sich dabei als besonders verlässlich erwiesen, da sie nach aktuellen WCAG-Standards prüfen.

Manuelles Testen der Navigation

Manuelle Tests sind unersetzlich, um zu prüfen, ob die Navigation tatsächlich vollständig per Tastatur bedienbar ist und ob Screenreader die Struktur korrekt vorlesen. Die Web Accessibility Initiative (WAI) stellt dazu eine Checkliste für einen manuellen Schnelltest bereit. Praktisch bedeutet das: Navigieren Sie ausschließlich mit der Tabulatortaste durch die gesamte Website und prüfen Sie, ob alle Menüpunkte erreichbar sind, ob der Fokus sichtbar bleibt und ob Dropdown-Menüs korrekt geöffnet und geschlossen werden können. Ein Screenreader-Test mit gängigen Tools wie NVDA oder VoiceOver gibt zusätzlich Aufschluss darüber, wie die Navigation für seheingeschränkte Nutzerinnen und Nutzer erlebbar ist.

Ein guter Risiko-Score im automatisierten Test ist eine notwendige, aber keine hinreichende Bedingung für Barrierefreiheit. Erst die Kombination beider Testmethoden liefert ein belastbares Bild des tatsächlichen Compliance-Stands.

Wer ist für die barrierefreie Navigation einer Website verantwortlich?

Die Verantwortung für eine barrierefreie Navigation liegt beim Betreiber der Website. Das BFSG verpflichtet Unternehmen, die unter seinen Anwendungsbereich fallen, dazu, ihre digitalen Angebote barrierefrei zu gestalten und eine Barrierefreiheitserklärung zu veröffentlichen. In der Praxis teilt sich die operative Verantwortung typischerweise auf mehrere Beteiligte auf.

In der Umsetzung sind folgende Rollen relevant:

Website-Betreiber: Trägt die rechtliche Verantwortung und ist gegenüber Behörden und Nutzenden rechenschaftspflichtig. Sie müssen sicherstellen, dass Barrierefreiheit bei Neuentwicklungen und Überarbeitungen berücksichtigt wird.
Webagenturen und Entwicklerinnen und Entwickler: Sind für die technisch korrekte Umsetzung zuständig. Fehler in der semantischen Auszeichnung, bei ARIA-Attributen oder der Tastaturbedienbarkeit entstehen in der Regel in der Entwicklungsphase.
Content-Verantwortliche: Auch redaktionelle Entscheidungen beeinflussen die Barrierefreiheit der Navigation, etwa die Benennung von Menüpunkten oder die Struktur von Unterseiten.
Datenschutz- und Compliance-Beauftragte: Unterstützen dabei, den Compliance-Status zu dokumentieren, Risiken zu identifizieren und die Barrierefreiheitserklärung korrekt zu erstellen und aktuell zu halten.

Externe Beraterinnen und Berater sowie Datenschutzbeauftragte spielen eine wichtige Rolle dabei, Unternehmen bei der Prüfung auf Barrierefreiheit zu unterstützen und Maßnahmen zu priorisieren. Sie ersetzen jedoch nicht die Verantwortung des Betreibers selbst.

So unterstützt decareto bei barrierefreier Navigation

Wir bei decareto haben eine Barrierefreiheitssoftware entwickelt, die Agenturen, Compliance-Teams und Datenschutzbeauftragte dabei unterstützt, Navigationsprobleme systematisch zu erkennen und zu beheben. Unser Tool scannt Websites automatisiert nach WCAG 2.1 und 2.2 sowie BITV-Kriterien und liefert konkrete Handlungsempfehlungen für jedes gefundene Problem.

Das leistet decareto im Bereich barrierefreie Navigation konkret:

Automatisierter Navigationsscan: Wir prüfen Farbkontraste, semantische Auszeichnung, ARIA-Attribute und Fokus-Reihenfolge auf allen Unterseiten einer Website, einschließlich passwortgeschützter Bereiche.
Priorisierte Fehlerliste: Gefundene Probleme werden nach Schweregrad eingestuft, von kritisch bis geringfügig, damit Sie wissen, wo sofortiger Handlungsbedarf besteht.
Konkrete Handlungsempfehlungen: Zu jedem Problem liefern wir klare Hinweise zur Behebung, verständlich für Entwicklerinnen und Entwickler sowie für Beraterinnen und Berater ohne tiefes technisches Vorwissen.
Manuelle Tests ergänzbar: Probleme, die nur manuell erkannt werden können, lassen sich direkt im Report dokumentieren und dem automatisierten Scan hinzufügen.
Dauerhafte Überwachung: Hunderte Websites lassen sich kontinuierlich beobachten. Bei Änderungen erhalten Sie automatische Benachrichtigungen, sodass neue Barrieren in der Navigation sofort erkannt werden.
Barrierefreiheitserklärung: Auf Basis der Scan-Ergebnisse kann eine vorausgefüllte Barrierefreiheitserklärung erstellt werden, die alle gesetzlich geforderten Angaben enthält.

Testen Sie jetzt, wie Ihre Website in Sachen barrierefreier Navigation abschneidet: Jetzt kostenlos starten und in wenigen Minuten einen vollständigen Barrierefreiheitsbericht erhalten.

Dieser Text wurde mit Hilfe von KI erstellt und könnte Fehler beinhalten.