Eine barrierefreie Navigation entscheidet darüber, ob ein Mensch auf Ihrer Website findet, was er sucht – oder gleich im ersten Menü scheitert und wieder geht. Denn die Navigation ist für viele der einzige Zugang zu Ihren Inhalten: für blinde Menschen, die per Tastatur durch die Menüs springen, ebenso wie für Nutzer mit motorischen oder kognitiven Einschränkungen. In diesem Ratgeber zeige ich Ihnen aus der Audit-Praxis, welche WCAG-Kriterien gelten, wie Sie Menüs, Dropdowns, das Hamburger-Menü und Brotkrümel zugänglich aufbauen und welcher einfache Test sofort verrät, ob Ihre Navigation für Screenreader taugt.

Was ist eine barrierefreie Navigation?

Eine barrierefreie Navigation ist die Gesamtheit aller Menüs, Links und Wege, über die jeder Nutzer Ihre Inhalte erreichen kann. Sie muss für alle Eingabearten funktionieren – für Maus, Tastatur, Touch und Sprachsteuerung. Und sie muss für die assistive Technik verständlich sein.

Technisch beginnt das beim richtigen Baustein. Ein Navigationsbereich gehört in ein <nav>-Element, und die Menüpunkte gehören in eine Liste. So erkennt ein Screenreader den Bereich als Navigation und sagt sogar an, wie viele Punkte das Menü enthält.

Wichtig ist der Blick über die reine Optik hinaus. Ein Menü, das mit der Maus gut aussieht, kann per Tastatur völlig unbrauchbar sein. Genau diese Lücke zwischen Aussehen und Bedienbarkeit ist es, die eine Navigation barrierefrei oder unzugänglich macht. Deshalb prüfen wir Navigation nie nur mit der Maus, sondern immer auch mit Tastatur und Screenreader.

Wer auf eine klare Navigation angewiesen ist

Von einer klaren Navigation profitieren weit mehr Menschen als nur Screenreader-Nutzer. Denn jede Eingabeart stellt eigene Ansprüche. Wer nur die Tastatur nutzt, braucht erreichbare Menüpunkte und einen sichtbaren Fokus. Und wer eine Maus nicht präzise führen kann, braucht ausreichend große Ziele.

Auch die kognitive Ebene zählt. Menschen mit Konzentrations- oder Gedächtnisschwierigkeiten verlassen sich auf konsistente Muster und eine gut auffindbare Suche. Für sie ist eine vorhersehbare Navigation der Unterschied zwischen Ankommen und Aufgeben.

Hinzu kommt ein klarer Geschäftsgrund. Wer den Weg zu Ihren Inhalten nicht findet, springt ab – noch bevor er Ihr Angebot überhaupt gesehen hat. Eine barrierefreie Navigation senkt damit die Absprungrate für alle Nutzer. Genau dieses Zusammenspiel prüfen wir in einem Access Ready-Audit mit echten Nutzern.

Mehrere Wege zum Ziel: nicht nur das Menü

Eine gute Website bietet mehr als einen Weg zu jeder Seite. Genau das verlangt das Erfolgskriterium 2.4.5 Mehrere Wege (Stufe AA): Mindestens zwei unterschiedliche Methoden müssen zu jeder Seite führen. Typisch sind ein Menü, eine Suche, eine Sitemap und Brotkrümel.

Entscheidend ist dabei die Unterschiedlichkeit. Zwei identische Menüs in Kopf- und Fußzeile zählen oft als ein einziger Weg, weil sie denselben Ansatz verfolgen. Echte Alternativen bieten verschiedene Zugänge – etwa das Stöbern nach Kategorie gegenüber der gezielten Suche.

Eine Ausnahme gibt es. Seiten, die ein Schritt in einem Prozess sind, etwa eine Kasse oder ein Antragsformular, brauchen diese Mehrgleisigkeit nicht. Für alle übrigen Inhaltsseiten aber gilt: Wer nur einen Weg anbietet, schließt jene aus, denen dieser eine Weg schwerfällt. Und er verschenkt Reichweite, weil unterschiedliche Menschen unterschiedlich suchen.

Konsistenz: überall gleich

Nichts verwirrt Nutzer mehr als eine Navigation, die sich von Seite zu Seite verändert. Deshalb verlangt das Erfolgskriterium 3.2.3 Konsistente Navigation (Stufe AA), dass wiederkehrende Navigationselemente immer in derselben Reihenfolge erscheinen. Das Menü bleibt also überall an seinem Platz.

Dazu kommt die einheitliche Benennung. Nach dem Kriterium 3.2.4 Konsistente Identifikation (Stufe AA) müssen Elemente mit gleicher Funktion überall gleich heißen. Nennen Sie einen Link also nicht einmal „Kontakt“ und auf der nächsten Seite „Kontaktieren Sie uns“.

Der Nutzen reicht weit. Konsistente Muster bilden ein verlässliches mentales Modell, das die Orientierung erleichtert. Besonders Menschen mit kognitiven Einschränkungen profitieren davon, weil sie sich nicht auf jeder Seite neu zurechtfinden müssen. Und auch Sehende finden schneller, was sie bereits kennen.

Die Navigation als Landmarke auszeichnen

Screenreader-Nutzer springen nicht nur über Überschriften, sondern auch über Landmarken durch eine Seite. Der Navigationsbereich ist eine solche Landmarke. Damit sie nützt, braucht jeder Navigationsbereich einen eindeutigen Namen über das Attribut aria-label.

Der Grund wird beim Mehrfachgebrauch sichtbar. Hat eine Seite mehrere Navigationsbereiche – Haupt-, Fußzeilen- und Brotkrümelnavigation –, erscheinen sie in der Landmarken-Liste sonst alle als bloßes „Navigation“. Ein blinder Mensch kann sie dann nicht auseinanderhalten. Mit Bezeichnungen wie „Hauptnavigation“ oder „Fußzeile“ wird die Liste hingegen sofort nutzbar.

Eine Regel sollten Sie dabei beachten. Der Name soll den Inhalt der Navigation beschreiben, nicht ihre Position. Und übertreiben Sie es nicht mit der Zahl der Bereiche, denn zu viele Landmarken machen die Liste wieder unübersichtlich. Wie Landmarken und Überschriften zusammenwirken, vertiefe ich im Ratgeber zur Überschriftenstruktur. Beide zusammen ergeben die Karte, mit der sich ein blinder Mensch durch Ihre Seite bewegt.

Sprunglinks: die Navigation überspringen

Tastaturnutzer müssen sich sonst auf jeder Seite durch die komplette Navigation tabben, bevor sie zum Inhalt kommen. Genau das verhindert ein Sprunglink. Das Erfolgskriterium 2.4.1 Blöcke umgehen (Stufe A) verlangt einen solchen Mechanismus zum Überspringen wiederkehrender Blöcke.

Die Umsetzung ist denkbar einfach. Ein Link „Zum Hauptinhalt springen“ steht als erstes fokussierbares Element der Seite. Sichtbar wird er erst beim Anspringen mit der Tastatur, ansonsten bleibt er verborgen. Ein Klick befördert den Nutzer dann direkt zum Hauptinhalt.

Der Nutzen ist groß und der Aufwand klein. Denn der Sprunglink hilft nicht nur blinden Menschen, sondern allen, die per Tastatur navigieren. Er ist mit wenigen Zeilen umgesetzt und gehört auf jede Seite mit umfangreicher Navigation.

Dropdown-Menüs richtig umsetzen

Dropdown-Menüs sind der häufigste Stolperstein in der Navigation. Denn viele reagieren nur auf das Überfahren mit der Maus – und genau das funktioniert per Tastatur und auf dem Touchscreen nicht. Setzen Sie ein Untermenü deshalb nie allein auf einen Hover-Effekt. Denn was sich nicht anklicken oder antippen lässt, existiert für viele Nutzer schlicht nicht.

Bewährt hat sich das sogenannte Disclosure-Muster. Dabei wird jedes Untermenü von einem echten <button> geöffnet, der die Zustände über aria-expanded="false" und aria-expanded="true" ansagt und per aria-controls auf das Menü verweist. Dieses Muster wird von Screenreadern verlässlicher unterstützt als das komplexe ARIA-Menubar-Muster und ist für Website-Navigation die bessere Wahl.

Drei Regeln runden das ab. Das Untermenü muss sich mit Escape schließen lassen, der Fokus kehrt danach zum auslösenden Knopf zurück, und das Menü darf nicht von selbst aufklappen, nur weil der Fokus es streift. Auch fordert das Kriterium 1.4.13 Inhalt bei Hover oder Fokus (Stufe AA), dass aufklappende Inhalte schließbar, überfahrbar und beständig sind. Die Tastaturbedienung dahinter vertiefe ich im Ratgeber zur Tastaturnavigation.

Mega-Menüs ohne Falle

Mega-Menüs zeigen viele Links in mehreren Spalten zugleich. Das ist mächtig, aber fehleranfällig. Denn gerade hier entstehen häufig Tastaturfallen, in denen der Fokus stecken bleibt und gegen das Kriterium 2.1.2 Keine Tastaturfalle verstößt.

Die typischen Probleme sind bekannt. Das Menü öffnet beim Überfahren von selbst, der Fokus landet auf unsichtbaren Elementen, oder die vielen Punkte sind ohne Gliederung nicht zu überblicken. Strukturieren Sie die Spalten deshalb mit echten Überschriften und steuern Sie den Fokus bewusst.

Auf kleinen Bildschirmen stößt das Mega-Menü an Grenzen. Hier sind Alternativen besser: ein Aufklapp-Menü in Akkordeon-Form, eine Reiter-Struktur oder ein bildschirmfüllendes Overlay mit genug Platz für die Bedienung. Wichtig ist, dass die Tastaturbedienung über alle Bildschirmgrößen hinweg gleich verlässlich bleibt. Im Zweifel ist ein einfaches, gut bedienbares Menü besser als ein beeindruckendes, das niemand mit der Tastatur beherrscht.

Das Hamburger-Menü auf dem Smartphone

Auf dem Smartphone steckt die Navigation meist hinter dem Hamburger-Symbol. Dieses Symbol allein ist für einen Screenreader jedoch bedeutungslos. Der Auslöser muss deshalb ein echter <button> mit einem klaren Namen sein – etwa sichtbarer Text „Menü“ oder ein aria-label, während das Icon mit aria-hidden="true" ausgeblendet wird.

Der Zustand muss hörbar sein. Über aria-expanded sagt der Knopf an, ob das Menü geöffnet oder geschlossen ist, und aria-controls verweist auf den Menübereich. Öffnet sich das Menü als Overlay, wandert der Fokus hinein und bleibt darin gefangen, bis Escape es wieder schließt und den Fokus zurückgibt.

Zwei Werte aus WCAG 2.2 sind hier wichtig. Die Bedienelemente sollten mindestens 24 mal 24 Pixel groß sein (2.5.8 Zielgröße Minimum), besser noch 44 Pixel für komfortables Tippen. Und das Menü muss auch bei starker Vergrößerung nutzbar bleiben (1.4.10 Reflow). Mehr dazu im Ratgeber zur mobilen Barrierefreiheit. Denn auf dem Smartphone ist die Navigation für viele der allererste Kontakt mit Ihrer Seite.

Brotkrümel: zeigen, wo man ist

Brotkrümel verraten dem Nutzer, wo er sich innerhalb der Website befindet. Sie bilden den Pfad von der Startseite bis zur aktuellen Seite ab und unterstützen so das Erfolgskriterium 2.4.8 Position (Stufe AAA). Gerade auf tief verschachtelten Seiten sind sie eine große Hilfe.

Die technische Umsetzung ist klar geregelt. Verpacken Sie die Brotkrümel in ein <nav aria-label="Brotkrümel"> mit einer geordneten Liste. Die aktuelle Seite steht als letzter Eintrag und wird mit aria-current="page" markiert, die Trennzeichen blenden Sie mit aria-hidden="true" aus.

So entsteht ein klarer, hörbarer Pfad. Ein Screenreader-Nutzer hört die einzelnen Stationen und erkennt am Ende, auf welcher Seite er gerade steht. Wichtig ist nur, Brotkrümel dann auf allen vergleichbaren Seiten anzubieten – Konsistenz gilt auch hier. So entsteht ein verlässliches Gefühl dafür, wo man sich gerade befindet.

Die Suche als zweiter Weg

Die Suche ist oft der wichtigste zweite Weg zu Ihren Inhalten. Denn wer mit verschachtelten Menüs nicht zurechtkommt, gibt lieber ein Stichwort ein. Damit erfüllt eine gute Suche einen großen Teil des Anspruchs aus dem Kriterium 2.4.5 Mehrere Wege.

Barrierefrei wird sie durch zwei Dinge. Das Eingabefeld braucht eine echte Beschriftung, und der Suchbereich sollte als role="search" ausgezeichnet sein, damit ein Screenreader ihn als Landmarke findet. Beides ist mit wenig Aufwand umzusetzen.

Verstecken Sie die Suche nicht. Ein unklares Lupensymbol ohne Beschriftung hält viele Nutzer davon ab, sie überhaupt zu finden. Gerade für Menschen mit kognitiven Einschränkungen ist eine sichtbare, klar benannte Suche ein echtes Geschenk. Auch viele ältere Nutzer greifen lieber zur Suche als zum verschachtelten Menü.

Footer- und Seitenleisten-Navigation

Neben der Hauptnavigation tragen oft weitere Bereiche zur Orientierung bei. Auch sie brauchen klare Regeln. Eine Fußzeilen-Navigation etwa sollte ohne Dropdowns auskommen, weil dort aufklappende Untermenüs eher stören als helfen.

Eine Seitenleiste folgt eigenen Empfehlungen. Bei vielen Unterseiten kann sie tiefere Ebenen in Akkordeons bündeln, damit die Liste nicht endlos wird. Idealerweise steht die Seitenleiste rechts und im Quelltext nach dem Inhalt, damit ein Sprunglink direkt zur Hauptüberschrift führt.

Ein Grundsatz verbindet alle Bereiche. Jeder zusätzliche Navigationsbereich braucht ein eigenes, aussagekräftiges aria-label und eine konsistente Verwendung über die ganze Website. So bleibt die Orientierung erhalten, statt durch zusätzliche Menüs verloren zu gehen.

Die aktuelle Seite kenntlich machen

Nutzer wollen wissen, wo im Menü sie sich gerade befinden. Markieren Sie die aktuelle Seite deshalb im Menü mit dem Attribut aria-current="page". So sagt der Screenreader an, dass dies die gerade geöffnete Seite ist.

Wichtig ist die doppelte Kennzeichnung. Die technische Markierung allein genügt nicht, sie braucht auch eine sichtbare Entsprechung. Heben Sie den aktiven Punkt visuell hervor, aber nicht allein über die Farbe, sondern zum Beispiel zusätzlich über Schriftstärke oder eine Markierung.

Der Effekt ist spürbar. Ein klar markierter aktueller Punkt gibt Orientierung und reduziert das Gefühl, sich verlaufen zu haben. So wirkt die Navigation verlässlich, statt den Nutzer im Unklaren zu lassen. Mehr zur farbunabhängigen Kennzeichnung zeige ich im Ratgeber zu Farben und Kontrasten.

Linktexte, die für sich sprechen

Ein Menü ist nur so gut wie die Texte seiner Links. Denn ein Linktext muss auch aus dem Zusammenhang gerissen verständlich sein. Genau das verlangt das Erfolgskriterium 2.4.4 Linkzweck im Kontext (Stufe A).

Der Grund liegt in der Arbeitsweise der Screenreader. Viele Nutzer rufen eine Liste aller Links einer Seite auf, ähnlich wie die Landmarken-Liste. Steht dort fünfmal „mehr“ oder „hier“, ist diese Liste wertlos, weil kein Eintrag verrät, wohin er führt.

Formulieren Sie Linktexte deshalb sprechend. Statt „mehr“ besser „mehr über unsere Leistungen“, statt „hier klicken“ lieber „Kontaktformular öffnen“. So weiß jeder Nutzer schon am Linktext, was ihn erwartet – im Menü wie im Fließtext.

Der Test: die Landmarken-Liste öffnen

Den aufschlussreichsten Test für Ihre Navigation können Sie in einer Minute selbst machen.

Aus der Praxis – die Landmarken-Liste: Öffnen Sie Ihre Seite mit einem Screenreader und rufen Sie die Liste der Landmarken oder Bereiche auf – in NVDA über die Elementliste, bei VoiceOver über den Rotor. Was sehen Sie dort? Erscheinen Ihre Navigationsbereiche als klar benannte Einträge wie „Hauptnavigation“, „Fußzeile“ und „Brotkrümel“? Oder stehen dort schlicht drei- bis viermal „Navigation“ untereinander? Im zweiten Fall ist die Liste für einen blinden Menschen wertlos, weil er die Bereiche nicht unterscheiden kann. Die Lösung kostet eine Zeile pro Bereich: ein aussagekräftiges aria-label an jedem <nav>. Tabben Sie anschließend einmal durch jedes Menü und prüfen Sie, ob jedes Dropdown sich öffnen, schließen und mit Escape verlassen lässt. Diese zwei Handgriffe decken die meisten Navigationsbarrieren auf.

Häufige Fehler bei der Navigation

Über viele Audits hinweg wiederholen sich dieselben Muster. Diese acht sehe ich am häufigsten – und alle lassen sich beheben:

• Hamburger ohne Namen: ein Icon-Knopf, den der Screenreader nicht benennt.
• Hover-Dropdowns, die per Tastatur und Touch nicht funktionieren.
• Kein Sprunglink zum Überspringen der Navigation.
• Wechselnde Reihenfolge oder Benennung von Seite zu Seite.
• Nur ein Weg zum Ziel, ohne Suche oder Sitemap.
• Zu kleine Ziele, die sich auf dem Touchscreen kaum treffen lassen.
• Unbenannte nav-Bereiche, die in der Landmarken-Liste alle gleich heißen.
• Aktuelle Seite nicht erkennbar markiert.

Auffällig ist dabei eines. Fast kein Fehler entsteht aus bösem Willen. Vielmehr entsteht er, weil die Navigation nur mit Maus und Augen getestet wurde – und beide diese Probleme nicht bemerken. Ein kurzer Durchgang mit Tastatur und Screenreader deckt fast alle davon auf.

Häufige Fragen zur barrierefreien Navigation

Zum Abschluss die Fragen, die mir in der Praxis am häufigsten begegnen.

Reicht ein Menü als einziger Weg zum Inhalt?

Nein. Das Kriterium 2.4.5 verlangt mindestens zwei unterschiedliche Wege, etwa Menü und Suche. Eine Ausnahme gilt nur für Seiten innerhalb eines Prozesses.

Darf das Hamburger-Menü nur aus einem Icon bestehen?

Nein. Ein reines Symbol ist für den Screenreader bedeutungslos. Geben Sie dem Knopf einen Namen über sichtbaren Text oder aria-label und blenden Sie das Icon aus.

Sind reine Hover-Dropdowns erlaubt?

Praktisch nicht. Denn per Tastatur und auf dem Touchscreen lässt sich nicht überfahren. Nutzen Sie das Disclosure-Muster mit einem echten Knopf und aria-expanded.

So machen Sie Ihre Navigation barrierefrei

Der Weg beginnt bei den messbaren Mängeln und endet beim echten Bedienerlebnis. Einen schnellen Überblick liefert der kostenlose Access Score in Minuten. Er erkennt automatisch, was sich messen lässt: einen fehlenden Sprunglink, unbenannte Navigationsbereiche oder zu kleine Ziele.

Ob die Menüs aber wirklich bedienbar sind, zeigt sich erst im Gebrauch. Öffnet sich jedes Dropdown per Tastatur? Findet ein blinder Mensch über die Landmarken? Ist die Navigation auf jeder Seite gleich? Das beurteilt kein Scanner allein. Mit Access Ready prüfen wir Ihre Navigation mit echten Nutzern assistiver Technik und stellen ein rechtssicheres Zertifikat aus.

Ansatz	Prüft Code	Prüft Bedienung	Nachweis
Kostenloser Scanner	messbare Mängel	nein	nein
Overlay-Widget	kaschiert, behebt nicht	nein	nein
Access Ready (IFDB)	Code und Bedienung	ja	ja

Der Unterschied liegt im Anspruch. Andere prüfen, ob ein Menü im Code vorhanden ist, und überlassen Ihnen den Rest. Wir prüfen, ob ein Mensch mit jeder Eingabeart wirklich ans Ziel kommt. So wird aus „das Menü ist doch da“ ein belegtes „jeder findet seinen Weg“. Und aus einer Seite, die man nur mit der Maus bedienen kann, wird eine, die für alle ein Tor zum Inhalt ist.