Typische Barrieren in der WordPress-Navigation
Auf den ersten Blick wirken viele Navigationsmenüs funktional. Sie sehen modern aus, sind schick animiert und passen gut ins Design. Doch unter der Oberfläche lauern oft Barrieren, die weitreichende Folgen haben. Was mit der Maus mühelos klickbar scheint, wird für Menschen mit alternativen Eingabemethoden schnell zum Problem.
Die häufigsten Barrieren betreffen die Tastaturnavigation und die Nutzung von Screenreadern. Typische Navigationsprobleme sind:
- Fehlende Tastaturzugänglichkeit: Menüpunkte oder Dropdown-Menüs lassen sich nicht per Tab-Taste erreichen oder öffnen sich nicht. Menschen, die keine Maus verwenden können, bleiben wichtige Bereiche der Website verwehrt.
- Fehlende Fokus-Hervorhebung: Der aktuell fokussierte Bereich ist nicht sichtbar markiert oder kaum erkennbar. Nutzer wissen nicht, wo sie sich gerade auf der Seite befinden – sie navigieren praktisch „blind“.
- Unzureichende semantische Auszeichnung: Fehlende oder falsche ARIA-Labels und HTML-Strukturen verwirren Screenreader und damit deren Nutzende mit Seheinschränkungen. Die assistive Technologie kann nicht unterscheiden, ob es sich um Navigation, Hauptinhalt oder Seitenbereiche handelt.
Diese Barrieren machen eine barrierefreie Navigation unmöglich und schließen Menschen mit Behinderungen von wesentlichen Website-Funktionen aus.
Tastaturnavigation: So sollten Barrierefreie Menüs bedienbar sein
Mit der Tastatur sollte jeder Menüpunkt erreichbar sein, inklusive aller Untermenüs. Die Tab-Taste führt dabei in logischer Reihenfolge durch alle verfügbaren Navigationspunkte. Unternavigationen öffnen sich per Enter- oder Leertaste. Geschlossene Untermenüs sollten vom TAB-Loop ausgenommen sein, da diese für den Nutzer nicht sichtbar sind. Sonst landen Nutzer bei versteckten Links und wissen nicht mehr, wo sie sich befinden.
Skip-Links: Der direkte Weg zum Inhalt
Ebenfalls wichtig für die Tastaturnavigation sind Skip-Links – meist „Zum Hauptinhalt springen“ – die als erstes Element auf der Seite stehen. Sie ermöglichen es Nutzern, die umfangreiche Navigation zu überspringen und direkt zum gewünschten Inhalt zu gelangen. Diese Links sind nur sichtbar, wenn sie per Tab fokussiert werden, und sparen Menschen mit Tastaturnavigation erheblich Zeit. Ohne Skip-Links müssen Nutzer bei jedem Seitenaufruf erst durch alle Navigationspunkte „durchkämpfen“, bevor sie zum eigentlichen Inhalt gelangen. Ein Skip-Link kann beispielsweise wie folgt implementiert werden:
<body>
<!-- Skip-Link als erstes Element -->
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
<header>
<nav id="main-navigation">
<!-- Navigation hier -->
</nav>
</header>
<main id="main-content" tabindex="-1">
<!-- Hauptinhalt hier -->
</main>
</body>.skip-link {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.skip-link:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 0.875rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
Orientierung und Navigation in verschachtelten Menüs
Während der Navigation ist eine klare Fokus-Hervorhebung und ein immer sichtbarer Fokus entscheidend für die Orientierung. Nutzer müssen jederzeit erkennen können, wo sie sich gerade befinden. Auch bei verschachtelten Navigationen ist die sich abhebende Visualisierung essenziell für die Orientierung in der Navigation.
Ein durchdachter Ansatz funktioniert so: Die Tab-Taste führt in logischer Reihenfolge durch die Hauptmenüpunkte. Erreicht der Fokus einen Menüpunkt mit Untermenü, öffnet sich das Untermenü per Enter- oder Leertaste. Anschließend navigiert Tab weiter durch die Untermenüpunkte. Verlässt der Fokus eine geöffnete Unternavigation, sollte sich diese automatisch schließen, um unerwünschte Sackgassen oder visuelle Überlagerungen zu vermeiden. So bleibt die Navigation übersichtlich und intuitiv bedienbar – auch ohne Maus. Auch mittels Escape-Taste sollten sich geöffnete Unternavigationen jederzeit wieder schließen lassen.
Mobile barrierefreie Navigation: Hamburger-Menüs zugänglich machen
Das Hamburger-Menü ist auf mobilen Geräten unverzichtbar, bringt aber besondere Herausforderungen für Menschen mit Behinderungen mit sich. Die drei größten Barrieren sind meist unklare Beschriftung, fehlende Tastatursteuerung und unkontrollierte Navigation.
Was Screenreader vom Hamburger-Symbol halten
Das Hamburger-Symbol mit seinen drei Strichen ist visuell eindeutig – für Screenreader jedoch völlig nichtssagend. Ohne entsprechende Beschriftung hören Nutzer nur „Schaltfläche“ oder gar nichts. Screenreader müssen daher explizit erfahren, worum es sich handelt: „Menü öffnen“ beim geschlossenen Zustand, „Menü schließen“ bei geöffnetem Menü.
Die Beschriftung erfolgt über aria-label oder versteckten Text mit einer speziellen CSS-Klasse wie sr-only (screen reader only). Während aria-label den Schaltflächentext komplett überschreibt, bleibt Text mit sr-only nur für Screenreader sichtbar – allerdings muss diese Klasse erst per CSS definiert werden, um Inhalte visuell zu verstecken aber für assistive Technologien zugänglich zu halten. Die Hamburger-Striche selbst erhalten aria-hidden="true", da sie rein dekorativ sind. Zusätzlich teilt das aria-expanded-Attribut mit, ob das Menü geöffnet (true) oder geschlossen (false) ist. Diese Information wird automatisch in die Screenreader-Ansage integriert – etwa als „Menü öffnen, eingeklappt“.
Ohne diese Attribute navigieren Nutzer orientierungslos: Sie wissen weder, was die Schaltfläche bewirkt, noch in welchem Zustand sich das Menü befindet.
Enter statt Klick: Tastatursteuerung für alle
Hamburger-Menüs werden oft nur für Maus und Touch-Bedienung entwickelt. Für Menschen, die auf Tastaturnavigation angewiesen sind, muss das Icon aber auch per Enter-Taste bedienbar sein. Das Menü muss sich auf Enter-Druck öffnen und schließen lassen – so bleibt die Bedienung konsistent und vorhersagbar.
Navigation ohne Sackgassen: Der Fokus-Loop
Hier liegt der kritischste Punkt: Ist das Hamburger-Menü geöffnet, darf die Tab-Navigation nicht einfach zur restlichen Seite weiterführen. Viele mobile Menüs lassen Nutzer „durchfallen“ – sie tabt durch die Menüpunkte und landet plötzlich im Hauptinhalt der Seite, während das Menü noch geöffnet ist.
Ein barrierefreies Hamburger-Menü funktioniert wie ein geschlossener Kreislauf: Die Tab-Taste führt durch alle Menüpunkte und springt dann wieder zum ersten Punkt zurück – nicht zur restlichen Seite. Erst wenn Nutzer aktiv einen Menüpunkt auswählen oder das Menü schließen, verlassen sie diesen geschützten Bereich.
Zusätzlich sollte sich das Menü jederzeit per Escape-Taste schließen lassen – das ist der Standard-Weg, um aus Dialogen und Overlays herauszukommen. Nach der Auswahl eines Menüpunkts schließt sich das Menü automatisch und verhindert so Überlagerungen auf der neuen Seite.
Semantik und die Verwendung von ARIA-Attributen
Eine barrierefreie Navigation basiert auf einer klaren, semantischen Struktur. HTML-Elemente wie <nav>, <ul>, <li> und <a> vermitteln Screenreadern, wie die Navigation aufgebaut ist und welche Elemente anklickbar sind. Diese semantischen HTML-Tags sind die Grundlage – sie sollten immer korrekt verwendet werden, anstatt auf ARIA-Rollen wie role="navigation" auszuweichen.
Ebenso wichtig ist die zuvor bereits erwähnte sichtbare Fokusmarkierung, damit Tastatur-Nutzende jederzeit erkennen können, wo sie sich gerade befinden. Ohne diese visuelle Rückmeldung wird Orientierung zur Herausforderung – selbst bei technisch korrekt umgesetztem Code.
ARIA (Accessible Rich Internet Applications)-Attribute verbessern gezielt die Zugänglichkeit einer Navigation für Nutzer. Sie liefern Screenreadern zusätzliche Informationen, die visuell sichtbar sind, aber akustisch fehlen würden.
Wichtige ARIA-Attribute für die Navigation sind beispielsweise:
aria-haspopupteilt Screenreadern mit, dass ein Menüpunkt ein Untermenü besitztaria-expandedzeigt an, ob ein Untermenü gerade geöffnet (true) oder geschlossen (false) istaria-labelüberschreibt den vorgelesenen Linktext komplett und sollte sparsam eingesetzt werden – nur bei unklaren (z.B. Links bei Icons) oder zu langen Linktextenaria-current="page"markiert die aktuell besuchte Seite und ist essentiell für die Orientierung. Screenreader geben diese Information explizit aus: „Startseite, aktuelle Seite“ statt nur „Startseite“.
Screenreader übersetzen diese Attribute in verständliche Ansagen – zum Beispiel „Menü, hat Untermenü“ oder „Untermenü geöffnet“. So erfahren Nutzer mit Sehbehinderung bereits beim Erreichen eines Menüpunkts, welche Optionen verfügbar sind und in welchem Zustand sich das Untermenü befindet. Ohne diese Attribute würden Screenreader nur den Link-Text vorlesen – wichtige Navigationsinformationen gehen verloren.
Folgend ein Beispiel, welches Screenreadern ermöglicht die Navigation besser zu erfassen:
<nav id="main-navigation">
<ul id="primary-menu" class="main-navigation">
<li><a href="#startseite">Startseite</a></li>
<li class="has-child"><a href="#agentur" aria-haspopup="true" aria-expanded="false">Agentur</a>
<ul hidden="">
<li><a href="#submenu01">Team</a></li>
<li><a href="#submenu02">Historie</a></li>
</ul>
</li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</nav>Navigation auf Barrierefreiheit prüfen: Probleme frühzeitig erkennen
Bevor man komplexe Lösungen implementiert, sollte man wissen, wo die aktuellen Schwachstellen der Hauptnavigation und Seitennavigation liegen. Eine einfache Erstprüfung geht so:
Der Tab-Test: Navigiere nur mit der Tab-, Enter- und Escape-Taste durch deine Website. Kommst du überall hin? Siehst du wo du gerade bist?
Der Screenreader-Test: Nutze einen Screenreader zur Navigation der Seite. Werden Menüpunkte verständlich vorgelesen? Erfährst du von Untermenüs?
Checkliste für das Testen der barrierefreien Navigation:
- Sind alle Menüpunkte per Tastatur erreichbar?
- Ist der Fokus immer sichtbar?
- Schließen sich Untermenüs automatisch beim Verlassen, oder können sie alternativ einfach explizit geschlossen werden?
- Haben Menüpunkte mit Unternavigation
aria-haspopup="true"? - Ist die aktuelle Seite mit
aria-current="page"markiert?
Rechtliche Anforderungen: Barrierefreiheit ist Pflicht
Barrierefreie Navigation ist nicht nur eine Frage der Inklusion und Usability – sie ist zunehmend auch rechtlich verpflichtend. Sowohl der European Accessibility Act als auch die BITV 2.0 für öffentliche Stellen definieren klare technische Anforderungen für die Navigation:
- Alle Funktionen müssen per Tastatur bedienbar sein
- Fokus-Indikatoren müssen ausreichend kontrastreich sein (mindestens 3:1)
- Die Navigation muss konsistent und vorhersagbar funktionieren
- Screenreader müssen alle relevanten Informationen erfassen können
Einen Überblick über die rechtlichen Verpflichtungen, Chancen und praktischen Umsetzung finden Sie in unserem Artikel „Barrierefreie Websites: Chancen und Pflichten – Ein Überblick„.
WordPress-Navigationen und Best Practice Basics
WordPress stellt zwar die technischen Grundlagen für Navigationen bereit, doch eine barrierefreie Umsetzung ist damit nicht automatisch gewährleistet. Ob die Navigation wirklich zugänglich ist, hängt maßgeblich von der Konzeption des Themes und dem entsprechenden Einsatz von JavaScript ab. Ohne durchdachte Struktur und barrierebewusste Interaktion bleibt die Navigation oft unvollständig zugänglich.
In WordPress kann man im Menü unter „Erweiterte Menüeigenschaften“ optional „Titel-Attribute“ hinzufügen. Dass diese Ergänzung sich positiv auf SEO auswirkt, stellt ein sich lang haltendes Irrtum dar. Suchmaschinen wie Google werten das title-Attribut in Links kaum bis gar nicht für das Ranking. Stattdessen liegt der Fokus auf sprechenden Linktexten, gut strukturierten Inhalten und zugänglicher Navigation. Außerdem werden title-Attribute von vielen Screenreadern ignoriert oder verwirrend vorgelesen – sie sollten daher nur sparsam und mit echtem Mehrwert eingesetzt werden. Viel mehr sollten die Linktexte bereits diese Funktion schon bestmöglich gewährleisten.
Wer keine Eigenlösung bereitstellen kann, ist somit Stand jetzt noch auf die Hilfe von „accessibility-ready“ Themes und/oder Plugin angewiesen, um zumindest die Navigation zugänglicher zu machen.
Professionelle Unterstützung für barrierefreie Navigation
Die Umsetzung einer vollständig barrierefreien Navigation erfordert nicht nur technisches Know-how, sondern auch ein tiefes Verständnis für die Bedürfnisse verschiedener Nutzergruppen. Was auf den ersten Blick wie kleine Anpassungen aussieht, entpuppt sich oft als komplexes Zusammenspiel aus HTML-Struktur, CSS-Gestaltung und JavaScript-Interaktionen.
Als BRANDORT Digitalschmiede haben wir uns als Webagentur auf die Entwicklung barrierefreier Websites spezialisiert und unterstützen Sie dabei, Ihre Navigation für alle Nutzer zugänglich zu machen. Wir analysieren bestehende Navigationsstrukturen, identifizieren Barrieren und entwickeln maßgeschneiderte Lösungen – von der einfachen WordPress-Navigation bis hin zu komplexen Mega-Menüs.
Unser Ansatz als Agentur für barrierefreie Websites geht über die reine technische Umsetzung hinaus: Wir testen mit verschiedenen assistiven Technologien und bei Bedarf mit echten Nutzern, und sorgen dafür, dass Ihre Navigation nicht nur den Standards entspricht, sondern tatsächlich funktioniert. Denn am Ende zählt nicht der perfekte Code, sondern die perfekte Benutzererfahrung.
Lassen Sie uns gemeinsam eine Navigation entwickeln, die wirklich alle willkommen heißt.