Navigierbar – Warum gute Navigation über Erfolg entscheidet

WCAG 2.4 Navigierbarkeit. Die WCAG 2.1 Richtlinie 2.4 „Navigierbar“ (Navigable) stellt sicher, dass Nutzer Inhalte finden, navigieren und ihren Standort bestimmen können. Mit dem BFSG 2025 wird dies für deutsche Unternehmen zur rechtlichen Pflicht – denn eine Website ist nur dann zugänglich, wenn Nutzer sich darauf zurechtfinden.

Stellen Sie sich vor, Sie betreten ein großes Kaufhaus ohne Wegweiser, Stockwerkpläne oder Abteilungsschilder. Sie würden wahrscheinlich frustriert wieder gehen. Genau so fühlt sich eine schlecht navigierbare Website an – besonders für Menschen mit Behinderungen. Blinde Nutzer mit Screenreadern müssen verstehen können, wo sie sich befinden und wie sie zu gewünschten Inhalten gelangen. Menschen mit kognitiven Einschränkungen benötigen klare Orientierungshilfen. Und alle Nutzer profitieren von einer durchdachten Navigation, die schnellen Zugriff auf wichtige Inhalte ermöglicht.

Für wen gilt das?

Ab dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) für alle Unternehmen, die digitale Produkte oder Dienstleistungen für Verbraucher anbieten – etwa Online-Shops, E-Learning-Plattformen, Banken, Telekommunikationsanbieter und Softwarehersteller.

Die Richtlinie ist also nicht nur für komplexe Plattformen oder große Portale relevant, sondern für jede Website, die Navigation oder interaktive Elemente anbietet. Denn unklare Strukturen, unbeschriftete Links oder fehlende Orientierungspunkte können bei Nutzer – insbesondere mit kognitiven oder motorischen Einschränkungen – zu Verwirrung, Fehlbedienungen oder Abbrüchen führen. Eine klare, nachvollziehbare Navigation ist daher entscheidend, damit alle Menschen Inhalte sicher finden und nutzen können.

Barrierefreiheit schützt hier also nicht nur vor rechtlichen Risiken, sondern ist eine Frage der digitalen Sicherheit.

Warum ist WCAG 2.4 Navigierbar so wichtig?

Navigation ist weit mehr als nur ein Menü am oberen Rand. Sie umfasst alle Mechanismen, die Nutzern helfen, Inhalte zu finden, zwischen Seiten zu wechseln und ihren aktuellen Standort zu verstehen. Für Screenreader-Nutzer ist Navigation besonders herausfordernd, da sie Seiten nicht visuell überblicken können. Sie sind auf logische Strukturen, aussagekräftige Überschriften und klare Links angewiesen.

Menschen mit kognitiven Beeinträchtigungen benötigen konsistente Navigationsmuster, die sich über alle Seiten hinweg gleich verhalten. Unerwartete Änderungen oder versteckte Navigationselemente führen zu Verwirrung und Orientierungsverlust. Auch Menschen mit motorischen Einschränkungen profitieren von effizienter Navigation, die lange Mauswege vermeidet und schnellen Tastaturzugriff bietet.

Geltungsbereich:

Gilt für alle Unternehmen, die mehr als 9 Beschäftigte haben oder deren Jahresumsatz 2 Millionen Euro übersteigt.

ONLINE -INTERAKTIONEN:

Webseiten, Plattformen, und Apps für den Austausch mit Kunden

Die wichtigsten Erfolgskriterien von 2.4 Navigierbar

Blöcke umgehen (Level A)

Nutzer müssen wiederkehrende Inhaltsblöcke wie Navigation oder Header überspringen können. Dies ist besonders wichtig für Tastatur- und Screenreader-Nutzer, die sonst auf jeder Seite durch die gesamte Navigation tabben müssen.

Umsetzungsmöglichkeiten:

Skip-Links: „Zum Hauptinhalt springen“ als erster fokusierbarer Link
Landmark-Regionen: Semantische HTML5-Elemente wie <nav>, <main>, <aside>
Überschriften-Hierarchie: Ermöglicht Navigation durch Überschriften
ARIA-Landmarks: role=“navigation“, role=“main“ für ältere Browser

Skip-Links können visuell versteckt sein und erst beim Fokussieren erscheinen. Sie sollten zu einem eindeutigen Ziel führen, typischerweise zum <main>-Element des Hauptinhalts.

Seite mit Titel versehen (Level A)

Jede Seite benötigt einen aussagekräftigen, eindeutigen Titel im <title>-Element. Dieser wird in Browser-Tabs, Lesezeichen und von Screenreadern angesagt.

Gute Titel-Struktur:

Spezifisch: „Preise und Pakete – BarriGo.“ statt nur „BarriGo.“
Einzigartig: Jede Seite hat einen anderen Titel
Prägnant: Wichtigste Information zuerst
Konsistent: Gleiches Format über alle Seiten

Der Titel ist oft das Erste, was Screenreader-Nutzer hören, wenn sie eine Seite aufrufen. Er sollte sofort vermitteln, worum es auf der Seite geht.

Fokus-Reihenfolge (Level A)

Die Reihenfolge, in der Elemente beim Tabben fokussiert werden, muss logisch und nachvollziehbar sein. Sie sollte der visuellen Lesereihenfolge und dem Bedeutungszusammenhang entsprechen.

Wichtige Aspekte:

Von oben nach unten, von links nach rechts (in westlichen Layouts)
Formulare in logischer Eingabereihenfolge
Verwandte Elemente bleiben zusammen
Vermeiden Sie tabindex-Werte größer als 0

Die Fokus-Reihenfolge wird primär durch die HTML-Struktur bestimmt. CSS kann die visuelle Position ändern, aber die Tab-Reihenfolge bleibt beim HTML-Code.

Link-Zweck (im Kontext) – Level A

Der Zweck jedes Links muss aus dem Linktext allein oder zusammen mit seinem Kontext erkennbar sein. Screenreader können Listen aller Links auf einer Seite anzeigen – dabei muss klar sein, wohin jeder Link führt.

Problematische Linktexte:

„Hier klicken“
„Mehr“
„Weiter“
„Link“

Gute Linktexte:

„Zu unseren Preisen und Paketen“
„Mehr über Barrierefreiheit erfahren“
„Jetzt kostenlos testen“
„Kontaktformular öffnen“

Der Linktext sollte für sich allein verständlich sein und das Ziel klar benennen. Bei mehreren gleichen Linktexten („Mehr erfahren“) auf einer Seite sollte der Kontext erkennbar machen, worum es jeweils geht.

Verschiedene Methoden (Level AA)

Es muss mehr als einen Weg geben, um Seiten innerhalb einer Website zu finden – außer wenn die Seite Ergebnis oder Schritt eines Prozesses ist.

Navigationsmöglichkeiten:

Hauptnavigation: Menü mit allen wichtigen Bereichen
Suchfunktion: Schnelles Finden spezifischer Inhalte
Sitemap: Übersicht aller Seiten
Breadcrumbs: Zeigen Position in der Hierarchie
Verwandte Inhalte: Links zu ähnlichen Seiten
Footer-Navigation: Alternative Zugriffswege

Diese Redundanz hilft verschiedenen Nutzergruppen: Manche bevorzugen Suche, andere navigieren durch Menüs, wieder andere nutzen Sitemaps.

Überschriften und Beschriftungen (Level AA)

Überschriften und Labels müssen den jeweiligen Inhalt oder Zweck beschreiben. Sie sind essentiell für das Verständnis der Seitenstruktur.

Gute Überschriften:

Beschreiben den nachfolgenden Inhalt präzise
Folgen einer logischen Hierarchie (H1 → H2 → H3)
Sind aussagekräftig, nicht nur dekorativ
Ermöglichen schnelles Scannen der Seite

Gute Labels:

Beschreiben eindeutig, was in ein Feld eingegeben werden soll
Bleiben sichtbar, auch wenn das Feld ausgefüllt ist
Sind mit dem Eingabefeld verknüpft (<label for=“…“>)

Fokus sichtbar (Level AA)

Der Tastaturfokus muss immer deutlich sichtbar sein. Nutzer müssen jederzeit erkennen können, welches Element gerade fokussiert ist.

Anforderungen:

Deutlicher visueller Indikator (Umrandung, Schatten, Hintergrundfarbe)
Kontrast von mindestens 3:1 zur Umgebung
Unterscheidbar vom Hover- und Normal-Zustand
Konsistent über die gesamte Website

Niemals outline: none ohne angemessene Alternative verwenden. Der Focus-Indikator ist für Tastatur-Nutzer unverzichtbar.

Focus Not Obscured (Minimum) – Level AA (Neu in WCAG 2.2)

Fokussierte Elemente dürfen nicht vollständig von anderen Inhalten verdeckt werden, etwa durch fixierte Header oder Cookie-Banner.

Praktische Umsetzung

Skip-Links implementieren

Skip-Links sollten das erste fokussierbare Element jeder Seite sein. Sie können visuell versteckt sein und erst beim Fokussieren erscheinen.

Einfache Implementierung:

Link mit href=“#main-content“ am Anfang des body
Hauptinhalt mit id=“main-content“ markieren
CSS: Link ist positioniert außerhalb des sichtbaren Bereichs
Bei :focus wird er sichtbar und positioniert

Aussagekräftige Seitentitel erstellen

Best Practices:

Format: „Seitenname – Bereichsname – Website-Name“
Beispiel: „Preise und Pakete – Barrierefreiheit – BarriGo.“
Wichtigste Information zuerst
Länge: 50-60 Zeichen optimal

Navigation konsistent gestalten

Wichtige Prinzipien:

Hauptnavigation an gleicher Position auf allen Seiten
Gleiche Reihenfolge der Menüpunkte
Konsistente Bezeichnungen für gleiche Funktionen
Aktiver Zustand deutlich erkennbar

Breadcrumbs einsetzen

Breadcrumbs zeigen den Pfad zur aktuellen Seite und ermöglichen schnelle Navigation zu übergeordneten Ebenen.

Struktur:

Home → Kategorie → Unterkategorie → Aktuelle Seite
Aktuelle Seite nicht als Link, sondern als Text
Mit ARIA: <nav aria-label=“Breadcrumb“>
Separator zwischen Elementen (/, >, →)

Suchfunktion bereitstellen

Eine gute Suchfunktion ist für große Websites essentiell.

Features:

Gut sichtbar platziert, idealerweise im Header
Autovervollständigung/Vorschläge während der Eingabe
Fehlertolerante Suche (Rechtschreibfehler)
Filter- und Sortiermöglichkeiten bei vielen Ergebnissen

BFSG 2025 und rechtliche Konsequenzen

Schlechte Navigation ist einer der häufigsten Gründe für Frustration und Abbruch bei Website-Besuchen. Für Menschen mit Behinderungen kann sie den Unterschied zwischen Nutzbarkeit und vollständiger Unzugänglichkeit bedeuten.

Besonders kritische Bereiche:

E-Commerce-Websites mit komplexer Produkthierarchie
Content-Portale mit vielen Unterseiten
Behörden- und Verwaltungswebsites
Bildungsplattformen mit Kursen und Materialien

Das BFSG macht klare, navigierbare Strukturen zur Pflicht. Websites ohne Skip-Links, mit unklaren Linktexten oder ohne alternative Navigationswege riskieren Abmahnungen und rechtliche Konsequenzen.

BarriGo. unterstützt Sie bei der Umsetzung

Die Analyse und Optimierung von Navigation ist komplex und zeitintensiv. BarriGo.Live Inspect unterstützt Sie dabei, alle relevanten Navigationsanforderungen der WCAG 2.4 zu prüfen. Das Tool analysiert automatisch Seitentitel, Überschriftenstruktur, Linktexte, Skip-Links und Fokusverhalten und markiert potenziell problematische Bereiche im Code. So erkennen Sie Barrieren frühzeitig und können die Orientierung auf Ihrer Website gezielt verbessern.
Ergänzend empfehlen sich manuelle Usability- und Fokus-Tests, um auch visuelle oder kontextabhängige Navigationsprobleme zu erfassen.

Weiterführende Informationen finden Sie im offiziellen WCAG 2.2 Standard: WCAG 2.2 – Richtlinie 2.4 Navigierbar