Technik

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

Q: Welche ARIA-Attribute braucht ein Dropdown-Menü?

Ein Dropdown-Menü benötigt mindestens aria-expanded (true/false) auf dem auslösenden Button und aria-haspopup='true'. Das Untermenü sollte mit role='menu' und die einzelnen Einträge mit role='menuitem' ausgezeichnet werden. Alternativ kann das Disclosure-Pattern ohne role='menu' verwendet werden.

Q: Wie mache ich ein Hamburger-Menü barrierefrei?

Der Hamburger-Button braucht ein aria-label (z.B. 'Menü öffnen') und aria-expanded='false', das beim Öffnen auf 'true' wechselt. Das geöffnete Menü muss per Escape schließbar sein, der Fokus soll ins Menü wandern und beim Schließen zurück zum Button.

Von Joshua Kantner · April 2026 · bf-check.de

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 Navigation ist der zentrale Zugangspunkt zu allen Inhalten. Nach dem Barrierefreiheitsstärkungsgesetz (BFSG, § 3) müssen Webseiten die EN 301 549 erfüllen, die sich an den WCAG 2.1 Level AA orientiert. Viele WCAG-Kriterien betreffen direkt die Navigation.

Eine barrierefreie Navigation muss drei Grundanforderungen erfüllen: Sie muss per Tastatur bedienbar sein (SC 2.1.1), von Screenreadern korrekt erkannt werden (SC 4.1.2) und auf allen Bildschirmgrößen funktionieren (SC 1.4.10). Diese Anforderungen betreffen nicht nur Menschen mit Behinderungen. Auch Power-User, die bevorzugt mit der Tastatur arbeiten, und Nutzer von Sprachsteuerung profitieren von einer gut umgesetzten Navigation.

Skip-Links: Nutzer direkt zum Inhalt springen lassen

Ein Skip-Link ist ein unsichtbarer Link ganz am Anfang der Seite, der erst sichtbar wird, wenn er den Tastaturfokus erhält. Er erfüllt WCAG SC 2.4.1 (Bypass Blocks) und ermöglicht es Tastaturnutzern, die gesamte Navigation zu überspringen und direkt zum Hauptinhalt zu gelangen.

Code-Beispiel: Skip-Link

<body>
  <a href="#main-content" class="skip-link">
    Zum Hauptinhalt springen
  </a>
  <nav aria-label="Hauptnavigation">...</nav>
  <main id="main-content">...</main>
</body>

/* CSS */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 8px 16px;
  background: #1e40af;
  color: #fff;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
}

Der Skip-Link ist eine der einfachsten und wirkungsvollsten Maßnahmen für barrierefreie Navigation. Ohne ihn müssen Tastaturnutzer bei jeder Seite alle Navigationspunkte einzeln durchtabben, bevor sie zum eigentlichen Inhalt gelangen. Weitere Informationen finden Sie im Skip-Links Glossar.

Hauptnavigation als nav-Element mit ARIA

Die Hauptnavigation gehört in ein semantisches <nav>-Element. Das ist ein ARIA-Landmark, das Screenreader-Nutzern hilft, die Navigation schnell zu finden und zu überspringen. Screenreader wie NVDA und JAWS bieten Shortcuts, um direkt zwischen Landmarks zu springen.

Code-Beispiel: Semantische Hauptnavigation

<nav aria-label="Hauptnavigation">
  <ul>
    <li><a href="/">Startseite</a></li>
    <li><a href="/produkte">Produkte</a></li>
    <li><a href="/kontakt">Kontakt</a></li>
  </ul>
</nav>

Wichtig: Wenn deine Seite mehrere <nav>-Elemente enthält (z. B. Hauptnavigation, Footer-Navigation, Sidebar-Navigation), muss jedes ein unterschiedliches aria-label erhalten. Sonst können Screenreader-Nutzer nicht unterscheiden, welche Navigation sie gerade hören.

Die aktuelle Seite sollte zusätzlich mit aria-current="page" markiert werden. Das hilft Screenreader-Nutzern zu erkennen, wo sie sich gerade befinden:

<li><a href="/produkte" aria-current="page">Produkte</a></li>

⚠️

Ist deine Webseite betroffen? Kostenloser BFSG-Schnellcheck – Ergebnis in 30 Sekunden.

Jetzt prüfen →

Dropdown-Menüs barrierefrei machen

Dropdown-Menüs sind einer der häufigsten Stolpersteine für die Barrierefreiheit. Das Problem: Viele Menüs öffnen sich nur bei Maus-Hover und sind für Tastaturnutzer nicht erreichbar. Das verletzt SC 2.1.1 (Keyboard). Mehr zum Thema Tastaturbedienbarkeit findest du in unserem Artikel Tastatur-Bedienbarkeit testen.

ARIA-Patterns für Dropdown-Menüs

Es gibt zwei gängige ARIA-Patterns für Dropdowns: das Menubar-Pattern und das Disclosure-Pattern. Für die meisten Webseiten-Navigationen empfiehlt sich das einfachere Disclosure-Pattern.

Disclosure-Pattern (empfohlen): Der Button hat aria-expanded="false" und aria-controls, das auf die ID des Untermenüs verweist. Beim Öffnen wechselt aria-expanded auf "true". Die Untermenüpunkte sind einfache Links in einer Liste.

<li>
  <button aria-expanded="false" aria-controls="sub-produkte">
    Produkte
  </button>
  <ul id="sub-produkte" hidden>
    <li><a href="/schuhe">Schuhe</a></li>
    <li><a href="/jacken">Jacken</a></li>
  </ul>
</li>

Menubar-Pattern (komplex): Verwendet role="menubar", role="menuitem" und role="menu". Erfordert vollständige Pfeiltasten-Navigation (links/rechts zwischen Hauptpunkten, hoch/runter im Untermenü). Dieses Pattern solltest du nur verwenden, wenn du eine echte Anwendungs-Menüleiste baust (wie in einem Texteditor). Für Webseiten-Navigation ist es meistens überdimensioniert. Mehr zu ARIA-Attributen findest du in unserem Beitrag ARIA-Attribute richtig einsetzen.

Tastaturinteraktion für Dropdowns

Unabhängig vom gewählten Pattern muss ein barrierefreies Dropdown diese Tastaturinteraktionen unterstützen:

Enter / Space: Öffnet das Dropdown
Escape: Schließt das Dropdown und setzt den Fokus zurück auf den Button
Tab: Bewegt den Fokus durch die Untermenüpunkte (beim Disclosure-Pattern)
Pfeiltasten: Navigiert zwischen den Menüeinträgen (beim Menubar-Pattern)

Mega-Menüs: Komplexität beherrschen

Mega-Menüs zeigen beim Öffnen eine große Fläche mit vielen Links, oft in Spalten gruppiert. Sie sind besonders herausfordernd für die Barrierefreiheit, weil Tastaturnutzer sich in der Vielzahl der Links verlieren können.

Empfehlungen für barrierefreie Mega-Menüs:

Gruppiere Links in logische Bereiche mit <ul>-Listen und beschrifteten Überschriften
Verwende aria-expanded auf dem auslösenden Element
Ermögliche das Schließen per Escape
Halte den Fokus innerhalb des Mega-Menüs, solange es geöffnet ist
Überlege, ob ein vereinfachtes Menü nicht die bessere Lösung wäre – weniger Optionen bedeuten weniger Barrieren

Mobile Hamburger-Menüs

Auf mobilen Geräten wird die Navigation typischerweise hinter einem Hamburger-Icon versteckt. Das ist aus Barrierefreiheits-Sicht ein Disclosure-Pattern: Ein Button, der einen versteckten Bereich ein- und ausblendet.

Anforderungen an den Hamburger-Button

Der Button braucht:

aria-label="Menü öffnen" (oder "Menü schließen" im geöffneten Zustand)
aria-expanded="false" (wird zu "true" beim Öffnen)
aria-controls, das auf die ID des Menü-Containers verweist

Code-Beispiel: Hamburger-Menü

<button
  class="hamburger"
  aria-label="Menü öffnen"
  aria-expanded="false"
  aria-controls="mobile-nav">
  <span class="hamburger-icon"></span>
</button>

<nav id="mobile-nav" aria-label="Hauptnavigation" hidden>
  <ul>
    <li><a href="/">Startseite</a></li>
    <li><a href="/produkte">Produkte</a></li>
  </ul>
</nav>

Fokus-Management beim Öffnen und Schließen

Wenn das Hamburger-Menü geöffnet wird, sollte der Fokus auf das erste Menüelement wandern. Beim Schließen (per Escape oder erneuten Klick) muss der Fokus zurück zum Hamburger-Button springen. Das ist entscheidend: Ohne korrektes Fokus-Management verlieren Tastaturnutzer die Orientierung (SC 2.4.3).

Ein häufiger Fehler: Das geöffnete Menü wird per CSS display: none ausgeblendet, aber der Fokus bleibt im unsichtbaren Menü hängen. Verwende das hidden-Attribut oder stelle sicher, dass der Fokus aktiv zurückgesetzt wird.

Breadcrumbs für bessere Orientierung

Breadcrumbs zeigen dem Nutzer, wo er sich in der Seitenhierarchie befindet. Sie helfen bei der Erfüllung von SC 2.4.8 (Location) und SC 2.4.5 (Multiple Ways) und sind für alle Nutzer eine wertvolle Orientierungshilfe.

Code-Beispiel: Barrierefreie Breadcrumbs

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Startseite</a></li>
    <li><a href="/produkte">Produkte</a></li>
    <li><a href="/produkte/schuhe" aria-current="page">Schuhe</a></li>
  </ol>
</nav>

Wichtige Details:

Verwende ein <nav>-Element mit aria-label="Breadcrumb"
Nutze eine geordnete Liste (<ol>), weil die Reihenfolge relevant ist
Markiere die aktuelle Seite mit aria-current="page"
Trennzeichen (z. B. ›) sollten per CSS (::before oder ::after) eingefügt werden, nicht als Text. Sonst liest der Screenreader sie unnötigerweise vor

Schritt für Schritt: Navigation prüfen

Mit dieser Checkliste prüfst du, ob deine Navigation barrierefrei ist:

Schritt 1: Skip-Link prüfen. Lade die Seite und drücke einmal Tab. Erscheint ein Skip-Link? Führt er zum Hauptinhalt?

Schritt 2: Tastaturnavigation. Navigiere die gesamte Menüstruktur nur mit Tab, Enter, Space und Escape. Kannst du alle Punkte erreichen? Ist der Fokus-Indikator immer sichtbar (SC 2.4.7)?

Schritt 3: Screenreader-Test. Öffne die Seite mit NVDA oder VoiceOver. Wird die Navigation als "Navigation, Hauptnavigation" angekündigt? Werden Dropdown-Zustände korrekt vorgelesen ("erweitert" / "reduziert")?

Schritt 4: Mobile Ansicht. Teste das Hamburger-Menü auf einem echten Mobilgerät oder im Responsive-Modus. Funktioniert es per Touch und per Tastatur? Ist die Touch-Zielgröße mindestens 24x24 CSS-Pixel (SC 2.5.8)?

Schritt 5: Automatischer Scan. Prüfe die Navigation mit dem bf-check.de Scanner und axe DevTools auf fehlende ARIA-Attribute und Strukturfehler.

Häufige Fehler bei der Navigation

Hover-only-Menüs: Menüs, die nur bei Maus-Hover aufklappen, sind für Tastaturnutzer und Touchscreen-Nutzer nicht bedienbar. Jedes Hover-Event muss auch per Fokus (Tastatur) auslösbar sein.

Positive tabindex-Werte: tabindex="1" oder höher überschreibt die natürliche DOM-Reihenfolge und führt fast immer zu einer verwirrenden Fokusreihenfolge. Verwende nur tabindex="0" (Element in natürlicher Reihenfolge fokussierbar) oder tabindex="-1" (programmatisch fokussierbar, aber nicht per Tab).

Fehlende Fokus-Indikatoren: outline: none ohne Ersatz-Styling entfernt den sichtbaren Fokusring und verletzt SC 2.4.7. Wenn dir der Standard-Fokusring nicht gefällt, ersetze ihn durch ein eigenes Styling – aber entferne ihn nie ersatzlos.

div statt button: Klickbare <div>-Elemente sind für Screenreader unsichtbar und nicht per Tastatur erreichbar. Verwende native <button>- oder <a>-Elemente. Falls ein <div> unvermeidbar ist, braucht es role="button", tabindex="0" und Keyboard-Event-Handler.

Fokus-Falle in Modalen: Wenn ein mobiles Menü geöffnet wird, aber der Fokus nicht eingeschlossen wird, können Tastaturnutzer "hinter" das Menü tabben und interagieren mit unsichtbaren Elementen. Das Menü muss den Fokus einschließen (Focus Trap), solange es geöffnet ist.

Dieser Artikel ersetzt keine Rechtsberatung. Für verbindliche Aussagen zur BFSG-Konformität deiner Webseite wende dich an eine qualifizierte Beratungsstelle oder Kanzlei.

Häufig gestellte Fragen

Müssen Mega-Menüs barrierefrei sein?

Ja. Mega-Menüs sind besonders herausfordernd. Sie müssen per Tastatur navigierbar sein und die Inhalte logisch gruppieren. Oft ist ein vereinfachtes Menü die bessere Lösung.

Was ist ein Skip-Link und brauche ich einen?

Ein Skip-Link ist ein unsichtbarer Link am Seitenanfang, der Tastaturnutzern erlaubt, direkt zum Hauptinhalt zu springen. Er wird nach WCAG SC 2.4.1 (Bypass Blocks) dringend empfohlen und ist eine der einfachsten Maßnahmen für bessere Tastaturnavigation.

Welche ARIA-Attribute braucht ein Dropdown-Menü?

Ein Dropdown-Menü benötigt mindestens aria-expanded (true/false) auf dem auslösenden Button und aria-haspopup="true". Das Untermenü sollte mit role="menu" und die einzelnen Einträge mit role="menuitem" ausgezeichnet werden. Alternativ kann das Disclosure-Pattern ohne role="menu" verwendet werden.

Wie mache ich ein Hamburger-Menü barrierefrei?

Der Hamburger-Button braucht ein aria-label (z. B. "Menü öffnen") und aria-expanded="false", das beim Öffnen auf "true" wechselt. Das geöffnete Menü muss per Escape schließbar sein, der Fokus soll ins Menü wandern und beim Schließen zurück zum Button.

Muss die Tab-Reihenfolge der visuellen Reihenfolge entsprechen?

Ja. WCAG SC 2.4.3 (Focus Order) verlangt, dass die Fokusreihenfolge sinnvoll ist und der visuellen Lesereihenfolge entspricht. Positive tabindex-Werte sollten vermieden werden, da sie die natürliche DOM-Reihenfolge überschreiben und zu Verwirrung führen.

Sind Breadcrumbs Pflicht nach dem BFSG?

Breadcrumbs sind keine explizite Pflicht nach dem BFSG, aber sie helfen bei der Erfüllung von WCAG SC 2.4.8 (Location) und SC 2.4.5 (Multiple Ways). Sie verbessern die Orientierung für alle Nutzer erheblich und sind daher dringend empfohlen.

Darf ein Menü nur bei Hover aufklappen?

Nein. Ein Menü, das nur per Maus-Hover funktioniert, ist für Tastaturnutzer nicht bedienbar und verletzt SC 2.1.1 (Keyboard). Hover-Menüs müssen immer auch per Tastatur (Enter/Space) auslösbar sein und per Escape geschlossen werden können.

Weiterlesen

Technik
Videos barrierefrei Technik
Barrierefreie PDFs erstellen Leitfaden
BFSG 2025: Der komplette Leitfaden

Ist deine Webseite BFSG-konform?

Finde es in 30 Sekunden heraus – kostenloser Schnellcheck mit sofortigem Ergebnis.

Jetzt kostenlos prüfen →