Barrierefreie Navigation – So gestalten Sie Ihre Website inklusiv
Was für manche Nutzer eine Navigation im Header-Menü einer Website ist, ist für andere ein Hindernisparcours. Eine barrierefreie Navigation beziehungsweise eine barrierefreie Websiteist wichtige digitale Infrastruktur – und für viele Nutzer essenziell. Wer digital alle erreicht, kommuniziert inklusiv, zugänglich und zukunftsfähig.
Eine logische Aufteilung des Menüs und visuelle Abgrenzungen sollten eigentlich in einer Navigation selbstverständlich sein. Doch haben Sie jemals etwas von Tastaturnavigation, Screenreaderkompatibilität oder ARIA-Attributen gehört? Für Website-Nutzer mit einer Behinderung oder temporären körperlichen Einschränkung sind solche „digitalen Rollstuhlrampen“ essenziell.
Laut dem Statistischen Bundesamt leben in Deutschland 7,9 Millionen Menschen mit einer schweren Behinderung. Darunter beispielsweise ca. 300.000 Menschen mit einer Sehbehinderung. Eine barrierefreie Navigation auf einer Website ist somit kein „nice to have“, sondern ein wichtiger Schritt in Richtung digitaler Inklusion. Das wird umso deutlicher mit dem Inkrafttreten des BFSG im Juni 2025.
Inhaltsverzeichnis
- Die Grundelemente der Website-Navigation
- Anforderungen und rechtliche Grundlagen
- Barrierefreie Navigation beginnt bei der Website-Struktur
- So sieht eine barrierefreie Navigation aus – ein Überblick
- Fazit – Eine barrierefreie Navigation ist nicht nur inklusiv, sondern schlau!
Die Grundelemente der Website-Navigation
Bevor wir uns mit einer barrierefreien Navigation beschäftigen, sollte zunächst geklärt werden, was überhaupt zu den Grundelementen einer Website-Navigation zählt – also welche Elemente Nutzern dabei helfen, sich auf der Website zurechtzufinden.
- Hauptnavigation: Das zentrale Menü, meist im Header – mit Links zu den wichtigsten Unterseiten.
- Sekundärnavigation: Zusätzliche Menüs, z. B. im Header als Submenüs, die ergänzende Inhalte erschließen.
- Breadcrumbs (Brotkrumenpfad): Zeigt die aktuelle Seitenhierarchie und erleichtert das Zurückspringen zu vorherigen Ebenen.
- Seitensuche: Ein Suchfeld, mit dem Inhalte gezielt gefunden werden können – besonders hilfreich bei vielen Unterseiten.
- Interne Verlinkungen: Links innerhalb von Texten oder Modulen, die auf weitere Inhalte führen.
- Buttons und Call-to-Actions: Navigieren gezielt zu Aktionen oder gewünschten Zielen (z. B. Kontakt, Produktseite, Newsletter).
- Inhaltsverzeichnis: Strukturelle Übersichten der Website – oft am Seitenanfang oder zum Einstieg in ein Unterthema verortet.
Weitere Navigationselemente sind:
- Pagination/Blätterfunktionen: Navigation durch mehrere Seiten einer Artikel- oder Produktübersicht.
- Filter- und Sortierfunktionen: Vor allem in Shops oder Katalogen – strukturieren Inhalte und helfen bei der gezielten Auswahl.
- Mobile Navigation (z. B. Burger-Menüs): An mobile Endgeräte angepasste Navigationselemente – meist reduziert und platzsparend.
Anforderungen und rechtliche Grundlagen – Das steht in den WCAG 2.1, der BITV 2.0 und dem BFSG
Die entscheidende Frage zuerst: Wer muss überhaupt eine barrierefreie Navigation umsetzen? Eine barrierefreie Navigation ist Teil einer barrierefreien Website:
Laut der BITV 2.0 sind bereits seit Mai 2019 staatliche Behörden zu einer barrierefreien Website verpflichtet.
Laut dem BFSG sind ab Juni 2025 auch bestimmte privatwirtschaftliche Unternehmen verpflichtet. Wichtig an dieser Stelle zu erwähnen ist, dass nicht alle privatwirtschaftlichen Unternehmen von der Pflicht betroffen sind.
Doch sollte die gesetzliche Pflicht zutreffend sein, gelten bei der Websitenavigation für beide Instanzen die gleichen Anforderungen – die WCAG 2.1. Einige der Kriterien sind unter dem Punkt „Navigierbar“ in der Konformitätsstufe A und AA zu finden.
Die Erfolgskriterien zur barrierefreien Navigation der WCAG 2.1
2.4.1 „Blöcke überspringen“ (Level A): Nutzer sollen Bereiche wie Menüs oder Fußzeilen, die sich auf jeder Seite wiederholen, einfach überspringen können.
2.4.2 „Seitentitel“ (Level A): Unterseiten sollen gemäß deren Inhalt entsprechend korrekt betitelt werden.
2.4.3 „Reihenfolge des Fokus“ (Level A): Wenn eine Webseite sequentiell mit der Tastatur navigiert wird, sollen die fokussierbaren Komponenten in einer logischen Reihenfolge anwählbar sein, welche die Bedeutung und die Bedienbarkeit bewahrt.
2.4.4 „Nachvollziehbare Links“ (Level A): Das Ziel einer Verlinkung soll bereits durch den Link-Text nachvollziehbar sein und im Kontext stehen.
2.4.5 „Unterschiedliche Wege“ (Level AA): Es soll mehrere Wege geben, eine bestimmte Unterseite zu finden.
2.4.6 „Überschriften und Labels“ (Level AA): Überschriften und Labels beschrieben immer das Thema oder den Nutzen einer Funktion/Anwendung.
2.4.7 „Sichtbarere Fokus“ (Level AA): Jede über die Tastatur bedienbare Benutzeroberfläche soll über eine visuelle Anzeige verfügen, wenn sie über die Tastatur angewählt/fokussiert wird.
In den WCAG 2.1 gibt es noch weitere Punkte, welche sich direkt oder indirekt auf eine barrierefreie Navigation beziehen. Diese alle zu nennen, würde jedoch den Rahmen des Blogbeitrags übersteigen. Eine Auflistung aller Aspekte der WCAG 2.1 finde Sie jedoch auf der offiziellen Website.
Barrierefreie Navigation beginnt bei der Website-Struktur
Wie leicht jemand durch eine Seite navigieren kann, hängt stark davon ab, wie sie aufgebaut ist. In der Regel sind die ersten Inhalte einer Website das Logo, das Navigationsmenü im Header, verschiedene Call to Actions oder ein Slider mit Bannern.
Wer mit der Maus und guten Augen unterwegs ist, hat es einfach: Ein kurzer Blick genügt, und schon ist der gesuchte Inhalt gefunden. Doch Menschen, die mit Tastatur oder Screenreader arbeiten, haben diesen Vorteil nicht. Sie müssen sich durch jedes einzelne Element durcharbeiten, bevor sie den Hauptinhalt erreichen.
Eine Website besteht in der Regel aus 30 bis 40 Unterseiten. Stellen Sie sich vor, ein Großteil dieser Unterseiten ist in der Navigation im Website-Header aufgeschlüsselt. Nun sind Sie aber auf einen Screenreader angewiesen. Jedes Mal, wenn Sie über die Website navigieren möchten, werden Ihnen bis zu 40 Navigationspunkte vorgelesen – klingt nervig? Für motorisch eingeschränkte Menschen kann das auch körperlich richtig anstrengend werden.
Deswegen sprechen wir als Agentur für barrierefreie Websites auch bewusst von einer „digitalen Rollstuhlrampe“.
Konkret heißt das:
Ein geordnetes Navigationsmenü und eine sinnvolle Strukturierung der Inhalte einer Website sparen viel Zeit für Menschen mit und ohne Behinderung. Thematisch strukturierte Landingpages helfen dabei, unnötige Navigationsebenen zu vermeiden und beeinträchtigte Nutzer gelangen schneller zu den eigentlichen Inhalten von Interesse.
Unterschiedliche Themenbereiche sollten gebündelt auf Landingpages dargestellt werden, bevor in tiefere Navigationsebenen abgetaucht wird. Die Navigation im Header (und damit die Wegführung für Screenreader und Tatstatur) bleibt somit übersichtlich und zugänglich.
So sieht eine barrierefreie Navigation aus – ein Überblick
Vorausgesetzt, eine saubere Website-Struktur lässt es zu, sind diese Bedienelemente und technischen Umsetzungen essenziell für eine barrierefreie Navigation:
Tastaturbedienung:
Die Seite kann komplett ohne Maus genutzt werden – z. B. können mit der Tabulatortaste von links nach rechts (mit Shift + Tabulator von rechts nach links) Elemente wie Buttons, Links und Navigationsfelder angewählt werden. Die Enter-Taste bestätigt die Auswahl oder klappt Drop-down-Menüs auf.
Visuell zugänglich:
Genügend Kontraste (mindestens im Verhältnis 3:1), deutlich sichtbare Fokuszustände bei der Navigation mit der Tastatur und ausreichend große Klickflächen (mindestens 24x24px) erleichtern die Bedienung von Navigation und von Buttons, Links etc.
Klar erkennbare Menüführung:
Die Menüstruktur ist übersichtlich, logisch und konsistent. Das bedeutet, es gibt eine einheitliche Headline-Struktur (konsequente Anordnung von H1 bis ggf. H6), eine eindeutige Betitelung der Seiten und eine nachvollziehbare Menüführung von links nach rechts sowie in Drop-down-Menüs von oben nach unten.
Screenreaderkompatibilität:
Blinde oder sehbehinderte Menschen können sich mithilfe von Screenreadern (Vorleseprogrammen) durch die Navigation leiten lassen, textliche Inhalte und Bildbeschreibungen vorlesen lassen sowie die Funktion von Buttons erörtern lassen.
Manche Website-Elemente sind technisch gesehen z. B. nur <div>-Container, sehen aber aus wie Schaltflächen oder Dialogfenster. Ein Screenreader erkennt das nicht automatisch.
→ Durch die Zuweisung „role=button“ erkennt der Screenreader die funktion Schaltfläche, anstatt nur den Text „Mehr erfahren“ vorzulesen. Weiterer Kontext über die Funktion des Buttons kann mit dem ARIA-Attribut „aria-label“ hinzugefügt werden.
Das gilt auch für Bilder und Grafiken. Visuelle Inhalte können durch beschreibende Alternativtexte für Screenreader „vorlesbar“ gemacht werden. Ohne Alternativtexte wird bestenfalls der Titel des Bilds vorgelesen.
Technisch saubere Umsetzung:
HTML-Elemente wie ARIA-Attribute helfen assistiven Technologien beim Erkennen der Struktur. Ohne ARIA können viele komplexe Webanwendungen wie Akkordeons, Tabs, Modale Fenster oder dynamische Inhalte für Menschen mit Screenreader unverständlich oder unbedienbar sein.
Beispielsweise hilft das Attribut „aria-label“ Screenreadern dabei, einen Bezug zur Funktion eines Buttons herzustellen.
→ Zu sehen ist nur ein Mail-Icon, welches auf die Funktion E-Mail senden weiterleitet. Ein Screenreader würde bestenfalls nur „Button“ oder „Schaltfläche“ erkennen und vorlesen.
→ Durch das aria-label=“E-Mail senden“ liest der Screenreader auch den Text “E-Mail senden“ vor, obwohl dieser nicht zu sehen ist.
Fazit – Eine barrierefreie Navigation ist nicht nur inklusiv, sondern schlau!
Schon bei der Navigation durch eine Website zeigt sich, dass digitale Hürden nicht so weit von physischen Barrieren entfernt sind, wie man zunächst annimmt. Durch Webseiten mit einer schlechten Struktur und ohne Support für assistive Hilfsmittel zu navigieren, ist nicht nur nervig, sondern sowohl psychisch als auch physisch anstrengend.
Als Agentur für barrierefreie Websites möchten wir Ihnen an dieser Stelle keine hohlen Drohgebärden entgegenschleudern, wie: “DIGITALE BARRIEREFREIHEIT IST PFLICHT UND ES DROHEN HOHE STRAFEN, WENN SIE DIESES UND JENES NICHT UMSETZEN.”
Wir möchten Ihnen nahelegen, Ihre Zielgruppe durch Inklusion zu erweitern und die User-Experience für jeden Nutzer Ihrer Website auf einem höchstmöglichen Niveau zu gestalten.
Wenn Sie eine barrierefreie Navigation umsetzen wollen oder andere Projekte zum Thema digitale Barrierefreiheit wie Texte in Leichter Sprache geplant haben, schreiben Sie uns einfach eine Mail über das unten stehende Kontaktformular. Gerne vereinbaren wir anschließend einen Termin für ein Gespräch – ob telefonisch, per Videocall oder bei einem persönlichen Treffen vor Ort.
