Hamburger-Menü erstellen
Ein Menü aus Button und echten Links
Menübutton, Liste, Linktexte: drei Stellen im aufklappbaren Menü.
Zwei Zustände, eine Wahrheit
Was beim Aufklappen wirklich wechseln muss
Ein Hamburger-Menü ist eine Offenlegung: Ein echter Button zeigt oder verbirgt eine Liste echter Links. Sichtbarkeit, Ansage und Tastaturweg wechseln gemeinsam.
Geschlossen und geöffnet im direkten Schnitt
Statische Darstellung eines mobilen Seitenkopfs, keine bedienbaren Elemente.
- Button
aria-expanded="false"- Linkliste
hiddenist vorhanden- Ansage
- „Menü, reduziert“
- Button
aria-expanded="true"- Linkliste
hiddenist entfernt- Ansage
- „Menü, erweitert“
- TabSchalter fokussieren
- EnterLinkliste öffnen
- TabDurch echte Links gehen
- EscSchließen und zurück
HTML: Button steuert die Linkliste
<header class="kopf">
<a class="marke" href="/">Nordlicht</a>
<button class="menue-schalter" type="button"
aria-label="Menü"
aria-controls="hauptmenue"
aria-expanded="false">
<span class="striche" aria-hidden="true"></span>
</button>
<nav aria-label="Hauptnavigation">
<ul id="hauptmenue" class="menue" hidden>
<li><a href="/leistungen">Leistungen</a></li>
<li><a href="/preise">Preise</a></li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</nav>
</header>CSS: Symbol, Fokus und Trefferflächen
.menue-schalter {
min-width: 2.75rem;
min-height: 2.75rem;
border: 2px solid currentColor;
background: transparent;
}
.menue-schalter:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
.striche,
.striche::before,
.striche::after {
display: block;
width: 1.5rem;
height: 3px;
background: currentColor;
}
.striche {
position: relative;
margin: auto;
}
.striche::before,
.striche::after {
position: absolute;
left: 0;
content: '';
}
.striche::before { top: -0.5rem; }
.striche::after { top: 0.5rem; }
.menue[hidden] { display: none; }
.menue a {
display: flex;
align-items: center;
min-height: 2.75rem;
}JavaScript: Anzeige und Ansage zusammenhalten
const schalter = document.querySelector('.menue-schalter');
const menue = document.getElementById('hauptmenue');
function menueSetzen(offen) {
menue.hidden = !offen;
schalter.setAttribute('aria-expanded', String(offen));
}
schalter.addEventListener('click', () => {
menueSetzen(menue.hidden);
});
document.addEventListener('keydown', (ereignis) => {
if (ereignis.key !== 'Escape' || menue.hidden) return;
menueSetzen(false);
schalter.focus();
});Ein nativer Button reagiert bereits auf Enter und Leertaste. Das Skript ergänzt nur das Öffnen, den synchronen Zustand und Escape; eigene Tastatur-Simulation ist unnötig.
Nachlesen und abgleichen
Das Disclosure-Muster der WAI-ARIA Authoring Practices definiert Button, Zustand und Standardtasten. Das W3C-Beispiel für Disclosure-Navigation erklärt Linklisten, Escape und den Verzicht auf menu-Rollen. MDN ordnet aria-expanded am steuernden Button ein.
Aus dem Prüfbericht
Zwei Regeln, zwei Befunde
Kritisch Die drei Striche ohne Namen Regel button-name
Das Symbol trägt aria-hidden, ein Text fehlt. aria-label="Menü" gibt der Schaltfläche im mobilen Kopfbereich einen Namen.
Kritisch Menüpunkte ohne Text Regel link-name
Ein Menüpunkt aus reinem Symbol bleibt namenlos. Schreiben Sie das Ziel in den Linktext der Menüliste.
Zum Mitnehmen
Das Hamburger-Menü, korrigiert
Ein Button, echte Linktexte, ein sauberer Umschalter.
Korrektur in 3 Schritten ansehen
Aus dem div einen Button machen
Ein button ist mit der Tastatur bedienbar. aria-label liefert den Namen, aria-expanded den Zustand des Menüs.
KorrekturvergleichSchritt 1 · HTML Vorher
<div class="menue-schalter" onclick="menueUmschalten()"> <span aria-hidden="true">☰</span> </div>Nachher
<button class="menue-schalter" type="button" aria-label="Menü" aria-controls="hauptmenue" aria-expanded="false"> <span aria-hidden="true">☰</span> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit der Tabulatortaste auf die drei Striche und drücken Sie die Leertaste. Das Menü klappt auf.
Die Menüpunkte als Links schreiben
Der Linktext nennt sein Ziel. Ein Pfeil allein bleibt in der Linkliste eines Vorleseprogramms ein leerer Eintrag.
KorrekturvergleichSchritt 2 · HTML Vorher
<ul id="hauptmenue" hidden> <li><a href="/leistungen"><span aria-hidden="true">›</span></a></li> </ul>Nachher
<ul id="hauptmenue" hidden> <li><a href="/leistungen">Leistungen</a></li> </ul>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Jeder Menüpunkt trägt dort seinen Namen.
Das Menü öffnen und schließen
Eine Entscheidung steuert Anzeige und Ansage. hidden nimmt das geschlossene Menü aus dem Bild und aus dem Tastaturweg.
KorrekturvergleichSchritt 3 · JavaScript Vorher
function menueUmschalten() { menue.classList.toggle('offen'); }Nachher
function menueUmschalten() { const offen = menue.hasAttribute('hidden'); menue.toggleAttribute('hidden', !offen); schalter.setAttribute('aria-expanded', String(offen)); }Markierte Zeilen wurden geändert
So prüfen Sie es Schließen Sie das Menü und drücken Sie Tab. Der Fokus springt an den Menüpunkten vorbei.