Hamburger-Menü barrierefrei: aria-expanded, Touch-Targets und Fokus

Das Hamburger-Menü ist aus der mobilen Webentwicklung nicht mehr wegzudenken – drei horizontale Striche, hinter denen sich die Navigation verbirgt. Aus Barrierefreiheitssicht ist dieses Pattern eine Herausforderung: Das Icon allein kommuniziert seine Funktion nicht, der versteckte Zustand der Navigation muss für assistive Technologien erkennbar sein, und das Öffnen und Schließen erfordert durchdachtes Fokus-Management. Gleichzeitig zeigt die Praxis, dass die meisten Hamburger-Menüs im Web erhebliche Barrierefreiheits-Mängel aufweisen. Mit den richtigen ARIA-Attributen, ausreichenden Touch-Targets und korrektem Fokus-Management lässt sich das Pattern jedoch gut zugänglich umsetzen.

ARIA-Attribute für den Toggle-Button

Der Hamburger-Button muss mehr kommunizieren als nur sein visuelles Erscheinungsbild. Das grundlegende Markup: ``. Das `aria-expanded`-Attribut teilt Screenreadern mit, ob das Menü geöffnet (`true`) oder geschlossen (`false`) ist – dieser Wert muss per JavaScript bei jedem Toggle aktualisiert werden. `aria-controls` verknüpft den Button mit dem Navigationscontainer über dessen ID. `aria-label` gibt dem Button einen zugänglichen Namen, da das Hamburger-Icon (☰ oder SVG) keinen Text enthält. Beim Öffnen sollte das Label auf „Menü schließen" wechseln, alternativ können Sie ein konsistentes Label „Hauptmenü" verwenden, das den Zustand über `aria-expanded` kommuniziert. Verzichten Sie auf `role="button"` wenn Sie ein ``-Element verwenden – die Rolle ist bereits implizit. Verwenden Sie kein `

` oder `` als Button – native `

`-Elemente bringen Tastaturzugänglichkeit und Screenreader-Semantik kostenlos mit.

Touch-Target-Größe und visuelles Design

Das Hamburger-Icon ist typischerweise 24×24 oder 20×20 Pixel groß – viel zu klein für zuverlässige Touch-Bedienung. Die klickbare Fläche des Buttons muss mindestens 44×44 CSS-Pixel betragen (WCAG 2.5.5). Erreichen Sie dies über Padding: Ein 24px-Icon mit 10px Padding ergibt 44×44px Klickfläche. Positionieren Sie den Button im leicht erreichbaren Bereich des Bildschirms – idealerweise oben rechts oder oben links, konsistent mit den Nutzererwartungen. Der Button muss einen sichtbaren Fokus-Indikator haben, der den WCAG-Kontrastanforderungen entspricht. Ergänzen Sie das Icon nach Möglichkeit mit einem Textlabel „Menü" – Studien zeigen, dass ein Hamburger-Icon mit Text signifikant häufiger erkannt und genutzt wird als das Icon allein. Wenn kein Textlabel möglich ist, stellen Sie sicher, dass das Icon selbst den Mindestkontrast von 3:1 zum Hintergrund einhält (WCAG 1.4.11 Non-text Contrast). Animieren Sie den Übergang von ☰ zu ✕ dezent – und respektieren Sie `prefers-reduced-motion`.

Fokus-Management beim Öffnen und Schließen

Beim Öffnen des Hamburger-Menüs muss der Fokus sinnvoll gesteuert werden. Zwei Ansätze sind etabliert: Bei einem Overlay-Menü (das den restlichen Inhalt verdeckt) sollte der Fokus ins Menü wandern und dort gefangen werden (Focus Trap) – der Nutzer kann nur innerhalb des Menüs und des Schließen-Buttons navigieren. Bei einem Menü, das den Inhalt nach unten schiebt, kann der Fokus auf dem Button bleiben und der nächste Tab-Stopp führt ins Menü. Beim Schließen muss der Fokus immer zum Hamburger-Button zurückkehren – dies ist besonders wichtig, wenn das Menü per Escape-Taste geschlossen wird. Implementieren Sie das Schließen über Escape: `document.addEventListener("keydown", (e) => { if (e.key === "Escape" && menuIsOpen) closeMenu(); })`. Bei Overlay-Menüs sollte ein Klick/Tap außerhalb des Menüs ebenfalls schließen. Verhindern Sie Scroll auf dem darunter liegenden Inhalt bei geöffnetem Overlay mit `body { overflow: hidden }` oder der modernen `inert`-Eigenschaft auf dem Hauptinhalt.

Responsive Breakpoints und Desktop-Fallback

Ein häufiger Fehler: Das Hamburger-Menü wird auch auf Desktop-Bildschirmen angezeigt, obwohl genug Platz für die volle Navigation vorhanden wäre. Definieren Sie klare Breakpoints, ab denen die vollständige Navigation angezeigt wird. Die versteckte Navigation im Hamburger-Menü muss im Quelltext semantisch korrekt als `