Eine Website kann noch so schön aussehen: Wenn Besucher sich nicht zurechtfinden, ist sie praktisch kaputt.
Navigation klingt erstmal nach Menü, ein paar Links und ein paar Buttons. Also nach etwas, das schnell erledigt ist. In Wirklichkeit entscheidet genau dieser Bereich darüber, ob Menschen eine Website überhaupt nutzen können.
Kann ich die Seite ohne Maus bedienen?
Verstehe ich, wohin ein Link führt?
Sehe ich, welcher Button gerade aktiv ist?
Komme ich aus einem geöffneten Menü wieder heraus?
Funktioniert das Ganze auch auf dem Smartphone?
Wenn die Antwort irgendwo „nein“ lautet, entsteht eine Barriere.
Gerade bei Websites, Online-Shops, Buchungsseiten oder Formularen ist die Navigation kein Nebenthema. Sie ist der Weg durch die Website. Und dieser Weg sollte für möglichst viele Menschen gut nutzbar sein.
Warum Navigation so oft unterschätzt wird
Viele Betreiber achten zuerst auf Design. Das Menü soll elegant wirken, Buttons sollen zur Marke passen und Links sollen nicht zu auffällig sein. Das ist verständlich.
Problematisch wird es, wenn Design wichtiger wird als Bedienbarkeit.
Ein Menüpunkt, der nur beim Überfahren mit der Maus sichtbar wird, kann für Tastaturnutzer schwierig sein. Ein Button ohne sichtbaren Fokus kann praktisch unsichtbar werden. Ein Link mit dem Text „Mehr erfahren“ kann unklar sein, wenn es davon zehn Stück auf einer Seite gibt.
Barrierefreie Navigation heißt nicht, dass eine Website langweilig aussehen muss. Es heißt nur: Nutzer müssen verstehen, wo sie sind, wohin sie gehen können und wie sie wieder zurückkommen.
1. Teste die Website ohne Maus
Der wichtigste Test ist einfach: Lege die Maus weg.
Nutze nur die Tastatur. Mit der Tab-Taste springst du von Element zu Element. Mit Shift + Tab gehst du zurück. Mit Enter aktivierst du Links und Buttons. Mit Escape solltest du geöffnete Menüs oder Popups schließen können.
Teste dabei:
Kommst du ins Hauptmenü?
Kannst du alle Menüpunkte erreichen?
Kannst du Untermenüs öffnen?
Kannst du Buttons aktivieren?
Kannst du Links öffnen?
Kommst du wieder aus Dropdowns heraus?
Bleibst du irgendwo hängen?
Wenn du den Mauszeiger automatisch wieder nehmen willst, ist das ein gutes Zeichen dafür, dass irgendwo etwas nicht sauber funktioniert.
2. Achte auf die Tab-Reihenfolge
Die Tab-Reihenfolge sollte logisch sein. Sie sollte ungefähr dem sichtbaren Aufbau der Seite folgen.
Typisch wäre:
Logo, Hauptnavigation, wichtige Buttons, Inhalt, Formular, Footer.
Problematisch ist es, wenn der Fokus plötzlich in den Footer springt, dann zurück ins Menü, dann in ein verstecktes Element und danach irgendwo in der Mitte der Seite landet.
Das fühlt sich nicht nur chaotisch an. Für Menschen, die mit Tastatur oder Hilfsmitteln arbeiten, kann es extrem verwirrend sein.
Prüfe deshalb jede wichtige Seite einmal mit Tab durch. Nicht nur die Startseite.
3. Der Fokus muss sichtbar sein
Wenn du mit der Tastatur navigierst, muss klar erkennbar sein, welches Element gerade aktiv ist.
Das nennt man Fokus.
Viele Websites entfernen den Fokusrahmen, weil er angeblich nicht schön aussieht. Das ist einer der klassischen Fehler.
Ein sichtbarer Fokus kann modern gestaltet sein. Er muss nicht wie ein alter Standardrahmen aussehen. Aber er muss deutlich genug sein.
Gut sind zum Beispiel:
ein klarer Rahmen,
eine farbige Hervorhebung,
ein sichtbarer Schatten,
eine Unterstreichung bei Links,
eine deutliche Hintergrundänderung.
Wichtig ist: Man darf nicht raten müssen, wo man gerade ist.
4. Der Fokus darf nicht verdeckt werden
Manchmal ist der Fokus zwar technisch vorhanden, aber nicht sichtbar. Zum Beispiel, weil ein Sticky Header darüberliegt oder ein Cookie-Banner den unteren Bereich verdeckt.
Das passiert besonders auf mobilen Ansichten oder bei langen Seiten.
Teste deshalb:
Ist der fokussierte Button im sichtbaren Bereich?
Wird ein Link von einem festen Header überdeckt?
Verdeckt ein Chat-Widget den nächsten Button?
Liegt ein Cookie-Banner über der Navigation?
Springt die Seite korrekt mit, wenn man per Tastatur navigiert?
Wenn der Fokus irgendwo verschwindet, ist die Bedienung schwer nachvollziehbar.
5. Das Hauptmenü muss verständlich aufgebaut sein
Ein Hauptmenü sollte nicht wie ein Rätsel wirken. Die wichtigsten Bereiche müssen klar benannt sein.
Gute Menüpunkte sind zum Beispiel:
Leistungen, Preise, Kontakt, Über uns, Shop, Blog, Termin buchen.
Weniger gut sind sehr kreative Begriffe, die nur intern verstanden werden. Wenn ein Besucher erst überlegen muss, was „Lösungen“, „Welt“, „Experience“ oder „Journey“ konkret bedeutet, ist das nicht ideal.
Kreativität ist schön. Aber Navigation sollte zuerst Orientierung geben.
6. Dropdown-Menüs sauber testen
Dropdowns sind eine häufige Fehlerquelle.
Viele Dropdown-Menüs funktionieren nur mit der Maus. Man fährt über einen Menüpunkt, das Untermenü erscheint, man klickt. Mit Tastatur ist das aber oft nicht so einfach.
Teste:
Kannst du das Dropdown mit der Tastatur öffnen?
Bleibt es offen, wenn du durch die Unterpunkte tabbst?
Kannst du es mit Escape schließen?
Ist erkennbar, dass ein Menüpunkt Unterpunkte hat?
Funktioniert das Dropdown auf dem Smartphone?
Springt der Fokus nicht plötzlich weg?
Wenn ein Untermenü nur bei Hover erscheint, ist Vorsicht angesagt. Hover allein reicht nicht.
7. Mobile Menüs nicht vergessen
Das mobile Menü ist oft eine eigene Welt. Desktop funktioniert, aber auf dem Smartphone beginnt das Problem.
Prüfe:
Ist der Menübutton gut erkennbar?
Hat der Button eine sinnvolle Funktion?
Öffnet und schließt sich das Menü zuverlässig?
Sind Untermenüs bedienbar?
Ist der aktuelle Fokus sichtbar?
Kann man das Menü mit Tastatur schließen?
Überlappt das Menü nicht mit Cookie-Bannern oder Chat-Widgets?
Gerade Hamburger-Menüs können hübsch aussehen und trotzdem schwer zugänglich sein.
8. Links müssen klar erkennbar sein
Links sollten als Links erkennbar sein. Nicht nur, wenn man zufällig mit der Maus darüberfährt.
Ein Problem entsteht, wenn Links im Text nur durch Farbe markiert sind, die kaum auffällt. Oder wenn sie genauso aussehen wie normaler Text.
Besser ist eine klare Unterscheidung, zum Beispiel durch Farbe und Unterstreichung oder eine andere deutliche Gestaltung.
Wichtig ist auch: Links sollten genügend Kontrast haben. Ein hellblauer Link auf weißem Hintergrund sieht vielleicht fein aus, ist aber oft schlecht lesbar.
9. Linktexte sollten für sich verständlich sein
„Hier klicken“ ist fast nie ein guter Linktext.
Warum? Weil der Link selbst nicht sagt, wohin er führt.
Besser:
„Kontaktformular öffnen“
„Preisliste als PDF herunterladen“
„Mehr über unsere Leistungen erfahren“
„Zum Warenkorb gehen“
„Terminbuchung starten“
Der Linktext sollte möglichst auch ohne den restlichen Absatz Sinn ergeben.
Das ist besonders wichtig für Nutzer, die Links gezielt durchsuchen oder sich eine Liste von Links vorlesen lassen.
10. Mehrere gleiche Links vermeiden
Auf vielen Seiten gibt es mehrere Buttons oder Links mit „Mehr erfahren“. Optisch ist das bequem. Inhaltlich ist es aber oft unklar.
Wenn unter drei Leistungsboxen jeweils „Mehr erfahren“ steht, weiß man ohne Kontext nicht, welcher Link wohin führt.
Besser ist:
„Mehr über Grundreinigung erfahren“
„Mehr über Glasreinigung erfahren“
„Mehr über Büroreinigung erfahren“
Das ist länger, aber deutlich verständlicher.
Bei Buttons in Karten kann der sichtbare Text kurz bleiben, wenn die technische Beschriftung sauber erweitert wird. Für normale Betreiber ist aber der einfache Weg meist besser: den Text direkt klarer schreiben.
11. Buttons müssen wie Buttons wirken
Ein Button sollte als klickbares Element erkennbar sein.
Problematisch sind Buttons, die wie normaler Text aussehen. Oder Textlinks, die wie Buttons aussehen, aber sich anders verhalten. Nutzer sollten nicht raten müssen.
Prüfe:
Hat der Button genug Kontrast?
Ist er groß genug?
Ist er eindeutig klickbar?
Hat er einen sichtbaren Fokus?
Ist der Text verständlich?
Funktioniert er mit Enter oder Leertaste?
Besonders wichtige Buttons wie „Jetzt kaufen“, „Termin buchen“ oder „Anfrage senden“ sollten glasklar sein.
12. Link oder Button: Nicht verwechseln
Ein Link führt normalerweise zu einer anderen Seite oder zu einem Bereich. Ein Button löst eine Aktion aus.
Beispiele:
Link: „Zur Kontaktseite“
Button: „Formular absenden“
Wenn alles wie ein Button aussieht, aber manche Elemente nur Links sind und andere Aktionen auslösen, kann das verwirrend werden.
Für Nutzer ist wichtig, dass Verhalten und Gestaltung zusammenpassen.
Ein Button sollte nicht plötzlich eine normale Informationsseite öffnen, wenn er wie ein Formular-Absenden-Button wirkt. Und ein Link sollte nicht unerwartet ein Popup auslösen, ohne dass es klar ist.
13. Aktive Zustände sichtbar machen
Nutzer sollten erkennen können, wo sie gerade sind.
Das gilt besonders für:
Hauptmenü, Breadcrumbs, Tabs, Filter, Kategorien, Seitennavigation und mobile Menüs.
Wenn jemand auf der Seite „Leistungen“ ist, darf der Menüpunkt „Leistungen“ ruhig erkennbar aktiv sein. Bei Shops sollten aktive Filter sichtbar sein. Bei Tabs sollte klar sein, welcher Tab geöffnet ist.
Orientierung ist ein wichtiger Teil von Barrierefreiheit.
14. Breadcrumbs können helfen
Breadcrumbs sind kleine Navigationspfade, zum Beispiel:
Startseite > Leistungen > Glasreinigung
Sie helfen besonders auf größeren Websites, Shops und Blogs.
Nicht jede kleine Website braucht Breadcrumbs. Aber wenn es viele Unterseiten, Kategorien oder Produkte gibt, können sie sehr nützlich sein.
Wichtig ist, dass Breadcrumbs nicht nur dekorativ sind. Sie sollten verständlich, klickbar und gut lesbar sein.
15. Skip-Link prüfen
Ein Skip-Link ist ein Link am Anfang der Seite, mit dem Nutzer direkt zum Hauptinhalt springen können.
Das ist besonders hilfreich, wenn eine Website ein großes Menü hat. Tastaturnutzer müssen dann nicht bei jeder Seite erst durch alle Menüpunkte tabben.
Ein Skip-Link ist oft unsichtbar, bis er per Tastatur fokussiert wird. Genau deshalb sollte man ihn testen.
Drücke direkt nach dem Laden der Seite die Tab-Taste. Erscheint ein Link wie „Zum Inhalt springen“? Funktioniert er? Landet man wirklich beim Hauptinhalt?
Wenn ja: sehr gut. Wenn nein: Bei größeren Seiten ist das eine sinnvolle Verbesserung.
16. Footer-Navigation nicht überladen
Der Footer ist wichtig, aber viele Websites packen dort alles hinein: Menü, Leistungen, Kontakt, Social Media, Rechtliches, Newsletter, Öffnungszeiten, Auszeichnungen und noch mehr.
Das kann schnell unübersichtlich werden.
Prüfe:
Sind Footer-Links verständlich?
Gibt es keine doppelten oder unnötigen Links?
Sind Rechtstexte leicht erreichbar?
Sind Kontaktmöglichkeiten klar benannt?
Ist die Tab-Reihenfolge im Footer logisch?
Der Footer darf umfangreich sein, sollte aber nicht wie ein Abstellraum wirken.
17. Popups und Overlays müssen steuerbar sein
Popups beeinflussen die Navigation stark.
Cookie-Banner, Newsletter-Popup, Chat-Fenster, Warenkorb-Overlay oder Terminbuchungsfenster können Nutzer aus dem normalen Ablauf reißen.
Teste:
Wird der Fokus ins Popup geführt?
Kann man das Popup mit Tastatur bedienen?
Kann man es schließen?
Kommt der Fokus danach sinnvoll zurück?
Ist der Hintergrund nicht weiter aktiv, wenn das Popup offen ist?
Wird das Popup mobil korrekt angezeigt?
Ein Popup, das man nicht schließen kann, ist eine echte Barriere.
18. Buttons in Slidern und Akkordeons prüfen
Slider, Akkordeons, Tabs und ausklappbare Bereiche sind häufige Elemente auf modernen Websites.
Sie müssen aber bedienbar sein.
Prüfe:
Kann man sie mit Tastatur erreichen?
Kann man sie öffnen und schließen?
Ist der Zustand erkennbar?
Sind Pfeile oder Icons beschriftet?
Stoppen automatische Slider?
Ist der Inhalt auch ohne Maus erreichbar?
Ein Plus-Icon ohne Namen kann für Screenreader unverständlich sein. Ein Pfeil ohne Erklärung ist ebenfalls nicht ideal.
19. Suche gut erreichbar machen
Bei größeren Websites und Shops ist die Suche ein wichtiger Navigationsweg.
Prüfe:
Ist die Suche leicht auffindbar?
Hat das Suchfeld eine klare Beschriftung?
Funktioniert die Suche mit Tastatur?
Sind Suchvorschläge bedienbar?
Sind Ergebnisse verständlich aufgebaut?
Kann man die Suche mobil gut nutzen?
Ein kleines Lupensymbol ohne Beschriftung kann funktionieren, sollte aber gut umgesetzt sein. Noch besser ist oft ein klar erkennbares Suchfeld.
20. Navigation in Formularen und Checkouts testen
Navigation endet nicht beim Menü. Auch Formulare und Checkouts haben eine innere Navigation.
Bei Kontaktformularen, Terminbuchungen oder Shops solltest du prüfen:
Springt man logisch von Feld zu Feld?
Sind Weiter-Buttons eindeutig?
Sind Zurück-Buttons vorhanden, wenn mehrere Schritte existieren?
Sind Fehlermeldungen erreichbar?
Bleiben Eingaben erhalten?
Ist klar, welcher Schritt gerade aktiv ist?
Gerade mehrstufige Formulare können sonst schnell verwirren.
21. Externe Tools mitprüfen
Viele Websites nutzen externe Tools:
Buchungskalender, Zahlungsanbieter, Cookie-Banner, Chat-Widgets, Newsletter-Formulare, Bewertungsboxen, Karten oder Kursplattformen.
Diese Elemente gehören für Nutzer trotzdem zur Website.
Prüfe deshalb auch dort:
Kann man Links und Buttons erreichen?
Ist der Fokus sichtbar?
Sind Texte verständlich?
Kann man Dialoge schließen?
Funktioniert alles mobil?
Es bringt wenig, wenn deine eigene Navigation gut ist, aber der eingebundene Kalender unbedienbar bleibt.
22. Screenreader-Grundtest machen
Du musst nicht sofort Profi im Screenreader-Testen werden. Aber ein einfacher Test kann viel zeigen.
Achte darauf, ob Links und Buttons sinnvoll vorgelesen werden.
Problematisch sind zum Beispiel:
„Button, leer“
„Link, hier“
„Link, mehr“
„Button, Symbol“
„Menü, nicht erweitert“, obwohl es offen ist
Wenn du solche Dinge findest, sind Beschriftungen oder Zustände wahrscheinlich nicht sauber umgesetzt.
23. Navigation nicht nur auf der Startseite prüfen
Viele testen nur die Startseite. Das reicht nicht.
Prüfe auch:
Leistungsseiten, Blogartikel, Produktseiten, Warenkorb, Checkout, Kontaktseite, Login, Kundenkonto, Landingpages und mobile Ansicht.
Gerade Unterseiten werden oft mit Pagebuildern anders gebaut. Dort können andere Menüs, Buttons, Popups oder Layouts auftauchen.
Die Navigation muss überall funktionieren, nicht nur auf der hübschen Startseite.
Typische Fehler bei Menü, Links und Buttons
Die häufigsten Probleme sind gar nicht so exotisch.
Dazu gehören:
unsichtbarer Fokus,
Dropdowns nur per Hover,
unklare Linktexte,
zu schwache Link-Kontraste,
Buttons ohne klare Beschriftung,
mobile Menüs mit Bedienproblemen,
Popups ohne Tastatursteuerung,
Icons ohne Erklärung,
falsche Tab-Reihenfolge,
aktive Zustände nur über Farbe.
Viele dieser Fehler lassen sich gut beheben, wenn man sie einmal gefunden hat.
Kurze Test-Checkliste
Wenn du wenig Zeit hast, teste wenigstens diese Punkte:
Website ohne Maus bedienen.
Fokus bei jedem Element prüfen.
Hauptmenü und mobile Navigation testen.
Dropdowns öffnen und schließen.
Linktexte auf Verständlichkeit prüfen.
Buttons auf klare Aktion prüfen.
Popups mit Tastatur schließen.
Warenkorb, Formular oder Buchung durchgehen.
Mobile Ansicht testen.
Externe Tools nicht vergessen.
Das ist kein vollständiger Audit, aber ein guter Anfang.
Fazit: Gute Navigation fühlt sich einfach an
Barrierefreie Navigation bedeutet nicht, dass eine Website kompliziert oder technisch wirken muss. Im Gegenteil.
Eine gute Navigation fällt oft kaum auf, weil sie einfach funktioniert.
Man findet, was man sucht.
Man erkennt, was klickbar ist.
Man sieht, wo man gerade ist.
Man kann die Seite auch ohne Maus bedienen.
Man versteht, was ein Button auslöst.
Genau darum geht es.
Mein praktischer Rat: Teste deine Website einmal ganz bewusst langsam. Ohne Maus. Mit Tab. Auf dem Smartphone. Mit geöffnetem Cookie-Banner. Mit Dropdown-Menü. Mit Formular. So findest du die echten Schwachstellen schneller als mit jedem Bauchgefühl.
Menüs, Links und Buttons sind nicht nur kleine Designelemente. Sie sind die Wege durch deine Website. Und je klarer diese Wege sind, desto besser ist die Website für alle Menschen nutzbar.
Dieser Artikel gibt eine allgemeine Orientierung und ersetzt keine Rechtsberatung.