Barrierefreie Navigation: Menüs, Dropdowns und Breadcrumbs richtig umsetzen

Die Navigation ist das Rückgrat der Barrierefreiheit

Wenn ein Nutzer die Navigation nicht bedienen kann, kann er die Webseite nicht nutzen – egal wie barrierefrei der Rest ist. Die Hauptnavigation muss per Tastatur bedienbar sein, von Screenreadern korrekt erkannt werden und auf allen Bildschirmgrößen funktionieren.

Hauptnavigation als nav-Element

Die Hauptnavigation gehört in ein nav-Element mit aria-label='Hauptnavigation'. Das hilft Screenreader-Nutzern die Navigation zu finden und zu überspringen. Mehrere nav-Elemente (z.B.

Footer-Navigation) brauchen unterschiedliche aria-labels.

Dropdown-Menüs barrierefrei machen

Dropdown-Menüs müssen: Per Enter/Space geöffnet werden können. Per Escape geschlossen werden. Per Pfeiltasten navigierbar sein.

Den Fokus im geöffneten Dropdown halten. ARIA-Attribute nutzen: aria-expanded, aria-haspopup.

Mobile Hamburger-Menüs

Der Hamburger-Button braucht: aria-label='Menü öffnen'. aria-expanded='false' (wird zu 'true' beim Öffnen). Das geöffnete Menü muss den Fokus fangen und per Escape schließbar sein.

Die Menüpunkte müssen per Tab erreichbar sein.

Breadcrumbs für bessere Orientierung

Breadcrumbs helfen allen Nutzern die Seitenstruktur zu verstehen. Implementierung: nav-Element mit aria-label='Breadcrumb'. Geordnete Liste (ol).

Der aktuelle Punkt mit aria-current='page' markiert. Trennzeichen per CSS, nicht als Text.

Häufig gestellte Fragen