Hamburger-Menü erstellen

Menü bauen. Vertrag mitbauen.

Nutzen Sie einen echten Button vor einer echten Navigation. Sichtbarer Text, aria-expanded und hidden müssen denselben Zustand beschreiben.

01 / Menü-Werkbank

Buttontext, Startzustand und Escape-Verhalten festlegen.

Die Demo startet von selbst und zeigt die wichtigsten Zustände. Sobald Sie eingreifen, gehört die Werkbank Ihnen.

Menü-Werkbank

Vorschau bereit: Menü geschlossen.

Live-Menü

Navigation aus Fokusweg entfernt

Code-Vertrag

Button: <button type="button" aria-expanded="false" aria-controls="site-nav">Menü</button>
Navigation: <nav id="site-nav" hidden>…</nav>
Verhalten: Escape → close(); trigger.focus();

Für normale Seitenlinks bleibt die Struktur ein nav, kein ARIA-Menü.

02 / Der Unterschied

Der Zustand läuft im Alltag auseinander
Kopierte Snippets öffnen das Menü sichtbar, während aria-expanded geschlossen meldet – oder blenden die Navigation nur optisch aus. Button, Attribut und hidden müssen denselben Zustand beschreiben.
Was der Check auf Ihrer Seite findet
Der Website-Check prüft unter anderem, ob ausgeblendete Bereiche noch fokussierbare Links enthalten, ob Schalter sichtbaren Text tragen und ob Kontraste rund um die Navigation ausreichen.
Fundstellen statt Bauchgefühl
Jeder Befund nennt Seite, Vorkommen und den nächsten Schritt. Kostenlos und ohne Installation: URL eingeben, Liste abarbeiten.

03 / Auf Ihrer Website

Die Werkbank zeigt den Vertrag im Beispiel. Der Website-Check prüft Ihre Seiten auf automatisch erkennbare Barrieren.