Ein Menü kann im Browser tadellos aussehen und trotzdem die halbe Besucherschaft aussperren. Klappt das Untermenü nur auf, wenn die Maus darüberfährt, steht jeder vor verschlossener Tür, der keine Maus führt. Sichtbar ist davon nichts, der Fehler steckt im Verhalten der Bauteile.
Die Navigation entscheidet, ob ein Besucher überhaupt irgendwo ankommt. Sie ist das Erste, was eine Seite jedem anbietet, und gleichzeitig die häufigste Stelle, an der Bedienbarkeit scheitert. Die meisten Hürden erkennst Du mit ein paar einfachen Handgriffen selbst, ohne die Optik anzufassen.
Warum die Navigation der Lackmustest ist
Fast jedes Bauteil einer Seite taucht einmal auf. Die Navigation taucht auf jeder einzelnen Unterseite auf. Ein Fehler im Menü bleibt deshalb nie auf einer Seite, er zieht sich durch den ganzen Auftritt.
Dazu kommt, dass das Menü aus den Bauteilen besteht, die erfahrungsgemäß am leichtesten klemmen: aufklappbare Untermenüs, das Burger-Symbol auf dem Handy, verschachtelte Ebenen. Jedes davon reagiert auf Klick, Tastatur und Touch unterschiedlich, und genau in diesen Unterschieden verstecken sich die Fehler. Wer das Menü sauber bestellt, hat den schwierigsten Teil der Grundlagen der Barrierefreiheit bereits hinter sich.
Der schnelle Selbsttest mit der Tabulatortaste
Du brauchst kein Werkzeug, um die größten Probleme zu finden. Leg die Maus zur Seite und geh allein mit der Tabulatortaste durch Dein Menü. Jeder Sprung landet auf dem nächsten Punkt, mit der Eingabetaste folgst Du ihm.
Achte dabei auf drei Dinge. Erstens: Erreichst Du jeden Menüpunkt, auch die in den Untermenüs? Zweitens: Siehst Du jederzeit, wo Du gerade stehst, also welcher Punkt gerade aktiv ist? Drittens: Bleibt die Reihenfolge logisch, statt wild zu springen? Dieselbe Sorgfalt brauchst Du, wenn Du lange Listen über Paginierung und Mehr-laden barrierefrei aufteilst.
Bleibst Du irgendwo hängen oder verlierst die Markierung aus dem Blick, hängt dort auch ein Teil Deiner Besucher fest. Wer noch tiefer prüfen will, findet die passenden Werkzeuge zum Testen im eigenen Beitrag.
Was eine gute Navigation auszeichnet
Ein bedienbares Menü erkennst Du an wenigen Merkmalen, die nichts mit dem Aussehen zu tun haben. Sie entscheiden, ob jeder Besucher ankommt, egal mit welchem Hilfsmittel er die Seite bedient.
- Per Tastatur erreichbar: Jeder Punkt lässt sich anspringen und auslösen, nicht nur mit der Maus.
- Sichtbare Markierung: Der gerade angesteuerte Punkt hebt sich deutlich ab, damit niemand die Orientierung verliert.
- Klare Benennung: Die Punkte heißen, was sie meinen, statt hinter Symbolen ohne Text zu verschwinden.
- Konsistente Position: Das Menü sitzt auf jeder Unterseite an derselben Stelle und in derselben Reihenfolge.
Keines dieser Merkmale kostet ein neues Design. Sie sind Sorgfalt im Aufbau, nicht in der Gestaltung, und genau danach fragst Du am besten gezielt nach, wenn Du Deine Seite bauen lässt.
Der Skip-Link spart lange Wege
Oben auf jeder Seite stehen meist Logo und ein langes Menü. Wer die Seite über die Tastatur bedient, muss sich auf jeder Unterseite erst durch alle Menüpunkte arbeiten, bevor der eigentliche Inhalt dran ist. Bei einem großen Menü kommen so schnell zwanzig Schritte zusammen, jedes Mal aufs Neue.
Ein „Zum Inhalt springen"-Link verkürzt diesen Weg. Er ist das allererste Angebot der Seite, bleibt zunächst unsichtbar und taucht erst auf, sobald jemand mit der Tastatur dorthin gelangt. Ein Druck darauf setzt direkt im Hauptinhalt auf, das lange Menü ist übersprungen.
Der Gewinn ist spürbar: Du sparst jedem, der ohne Maus arbeitet, auf jeder Seite ein gutes Dutzend überflüssige Schritte. Frag bei Deiner Agentur nach, ob Deine Seite so eine Sprung-Funktion ganz oben anbietet. Fehlt sie, ist das ein kleiner Handgriff mit großer Wirkung. Wie so ein Skip-Link genau funktioniert und das Menü überspringt, liest Du im eigenen Beitrag nach.
Dropdowns und Flyouts ohne Hover-Falle
Aufklappbare Untermenüs sind die häufigste Stolperstelle. Öffnet sich so ein Menü nur, wenn die Maus darüber schwebt, bleibt es für alle unerreichbar, die per Tastatur oder am Touchscreen unterwegs sind. Ein ganzer Ast Deiner Seite verschwindet damit für diese Besucher.
Ein gutes Untermenü reagiert deshalb auf einen Klick statt auf bloßes Drüberfahren. Der Punkt, der es öffnet, lässt sich mit der Tastatur ansteuern, mit der Eingabetaste aufklappen und mit der Escape-Taste wieder schließen. So kommt jeder heran, nicht nur die Maus.
Den Test machst Du wieder selbst: Versuch, ein Untermenü allein mit der Tastatur zu öffnen und zu schließen. Geht das nicht, ist der Inhalt dahinter für einen Teil Deiner Besucher schlicht nicht vorhanden.
Breadcrumbs zeigen den Standort
Ein Breadcrumb ist die kleine Pfadangabe der Form Start, Kategorie, aktuelle Seite. Sie beantwortet eine simple Frage: Wo bin ich gerade, und wie komme ich eine Ebene zurück? Gerade auf tief verschachtelten Seiten ist das eine echte Orientierungshilfe. Wer trotzdem nicht ans Ziel findet, greift zur Suche, weshalb Du auch Deine Suchfunktion barrierefrei aufbauen solltest.
Für Besucher mit Vorlesehilfe zählt, dass dieser Pfad als eigene Wegweisung erkennbar ist und nicht mit dem Hauptmenü verschwimmt. Dann lässt sich der Standort gezielt abrufen, ohne die ganze Seite abzusuchen.
Die letzte Station, die aktuelle Seite, ist kein klickbarer Link mehr, denn man steht ja bereits dort. So bleibt der Pfad bis zum Schluss eindeutig und führt niemanden im Kreis.
Das mobile Burger-Menü barrierefrei
Auf dem Handy schrumpft die Navigation zum bekannten Burger-Symbol mit den drei Strichen. Genau hier entsteht oft ein stiller Fehler: Das Symbol trägt keinen Namen. Eine Vorlesehilfe findet dann zwar drei Striche, weiß aber nicht, dass sich dahinter das Menü verbirgt.
Ein gutes Burger-Symbol verhält sich wie eine echte Schaltfläche und trägt einen sprechenden Namen wie „Menü". Damit ist klar, was ein Druck darauf bewirkt, auch wenn das Symbol selbst keinen Text zeigt. Genauso wichtig ist, dass sich das geöffnete Menü wieder mit derselben Bedienung schließt, mit der es aufging.
Auch das prüfst Du in einer Minute. Verkleinere das Browserfenster, bis das Burger-Symbol erscheint, und bedien es einmal allein mit der Tastatur. Öffnet und schließt es sauber, und liest sich das Menü in logischer Reihenfolge, ist die Schaltfläche dahinter richtig gebaut.
Fazit — bedienbar bleibt, was jeder findet
Eine barrierefreie Navigation entsteht aus mehreren kleinen Entscheidungen: eine Sprung-Funktion zum Inhalt, klickbare statt schwebende Untermenüs, ein benanntes Burger-Symbol, ein sichtbarer Standort. Jede für sich kostet wenig und wirkt auf jeder Seite.
Geh Deine eigene Navigation einmal mit diesem Blick durch und öffne jedes Menü ohne Maus. Wo Du hängenbleibst, hängt auch ein Teil Deiner Besucher fest, und genau dort lohnt der erste Handgriff. Dasselbe Auge hilft Dir bei Deinen Formularen gleich weiter.