Barrierefreie Navigation: Dropdowns und Mega-Menüs bedienbar gestalten

Ordnen Sie Einträge nach dem Verständnis Ihrer Besucher, nicht nach internen Abteilungen. Ein Mega-Menü braucht erkennbare Gruppen mit aussagekräftigen Bezeichnungen. Häufige Ziele sollten schnell erreichbar sein; seltene Unterpunkte können über eine gut gestaltete Übersichtsseite erschlossen werden.

Prüfen Sie, ob ein breites Menü überhaupt notwendig ist. Bei wenigen Leistungen kann eine einfache Liste besser funktionieren. Erklären Sie die Struktur einer unbeteiligten Person und lassen Sie sie ein konkretes Ziel finden. Wenn das nur mit zusätzlicher Erklärung gelingt, sollte zunächst die Informationsarchitektur verbessert werden.

Ein Link öffnet eine Seite, ein Bedienelement zum Aufklappen verändert einen Zustand. Muss ein Hauptpunkt beides leisten, braucht es eine klare Lösung, etwa einen Link zur Übersicht und einen getrennten Öffnungsbutton. Ein unvorhersehbarer Wechsel zwischen erstem und zweitem Klick ist auf Touch-Geräten besonders verwirrend.

Für gewöhnliche Website-Navigation sind native Links, Listen und passende Aufklappmuster häufig ausreichend. Die ARIA-Rolle menu bringt Erwartungen an eine besondere Tastaturbedienung mit und sollte nicht nur deshalb verwendet werden, weil ein Bereich umgangssprachlich Menü heißt. Zustände wie geöffnet und geschlossen müssen mit der tatsächlichen Darstellung übereinstimmen.

Mit Tab müssen erreichbare Menüeinträge in einer sinnvollen Reihenfolge durchlaufen werden können. Verborgene Unterpunkte gehören nicht versehentlich in den Fokusweg. Ein Öffnungsbutton braucht einen sichtbaren Fokus und eine verständliche Bezeichnung. Die Aktivierung per Enter oder Leertaste muss zum verwendeten Element passen.

Planen Sie auch das Schließen. Bei einem Disclosure-Menü ist Escape mit Fokusrückgabe auf den Öffner ein bewährtes Verhalten. Wird ein Bereich geschlossen, darf der Fokus nicht unsichtbar in seinen Unterpunkten verbleiben. Bei modalen mobilen Menüs müssen Fokusführung und Rückkehr zusätzlich zum gewählten Muster passen.

• ✓Sichtbarer Fokus auf allen erreichbaren Elementen
• ✓Kein ausschließliches Öffnen per Hover
• ✓Geöffnete Zustände korrekt mitteilen
• ✓Fokus nach dem Schließen sinnvoll zurückgeben

Ein kleiner Abstand zwischen Hauptpunkt und Dropdown kann das Untermenü schließen, während jemand zur gewünschten Option bewegt. Prüfen Sie die tatsächlichen Zeigerwege und vermeiden Sie flackernde Bereiche. Auf Touch-Geräten muss die Bedienung ohne Hover funktionieren und genügend Platz für eine sichere Auswahl bieten.

Testen Sie außerdem vergrößerten Text und schmale Viewports. Ein Mega-Menü darf nicht seitlich aus dem Bildschirm ragen. Lange Bezeichnungen müssen umbrechen können. Für sehr hohe Menüs braucht es einen erreichbaren unteren Bereich, ohne dass sich die eigentliche Seite unkontrolliert hinter einer verdeckenden Fläche bewegt.

Auf Mobilgeräten werden Gruppen oft als aufklappbare Abschnitte gezeigt. Verwenden Sie dieselben Zieladressen und Bezeichnungen wie am Desktop, damit keine wichtigen Links verschwinden. Machen Sie klar, welcher Abschnitt geöffnet ist, und prüfen Sie verschachtelte Ebenen mit echten langen Inhalten.

Eine Übersichtsseite bleibt eine hilfreiche Alternative für Menschen, denen komplexe Untermenüs schwerfallen. Wichtige Inhalte sollten nicht ausschließlich über eine aufwendige Interaktion erreichbar sein. Suchfunktion, thematische Links und Hauptseiten können ergänzende Wege bieten, ohne das Menü selbst weiter zu überladen.

Die Abnahme beginnt ohne Maus: Menü öffnen, mehrere Links erreichen, schließen und einen anderen Bereich wählen. Anschließend folgen Touch, vergrößerter Text und ein Screenreader mit den für das Projekt relevanten Browsern. Prüfen Sie, ob Linknamen und Zustände verständlich angekündigt werden.

Automatische Werkzeuge können fehlende Namen oder bestimmte Strukturprobleme finden, ersetzen aber nicht diese Bedienprüfung. Dokumentieren Sie die getesteten Wege und wiederholen Sie sie nach Änderungen an Navigation oder Header. Eine zugängliche Navigation bleibt nur dann verlässlich, wenn neue Menüpunkte dieselben Regeln einhalten.