Accessible Hamburger Menu
Das Menü, das sagt, ob es offen ist
Ein Symbol ohne Namen, ein geschlossenes Menü im Tab-Weg: zwei Befunde.
Offen und geschlossen
Zwei Ansichten, ein verlässlicher Zustand
Sichtbare Fläche, Ansage und Tab-Reihenfolge müssen dasselbe Menü beschreiben.
Menü geschlossen
Ein Klick schreibt zwei Werte
- Schalter
falsetrue- Navigation
hiddensichtbar- Nächster Tab
InhaltStart
aria-expanded und hidden wechseln in derselben Funktion.
Menü geöffnet
role="menu"? Diese Links navigieren zu Seiten. Dafür bleiben nav, Liste und Links die verständliche Struktur. Die zusätzliche ARIA-Menürolle würde eine Bedienung mit Pfeiltasten und verwaltetem Fokus versprechen, die eine normale Website-Navigation nicht braucht.
Der Tastaturweg
Der Fokus folgt der sichtbaren Spur
- TabSchalter fokussierenDer sichtbare Ring steht auf „Menü“.
- EnterNavigation öffnen
aria-expanded="true",hiddenentfernt. - TabLinks durchlaufenDer erste Stopp ist „Start“, danach folgen die übrigen Links.
- EscSchließen und zurückDas Menü verschwindet, der Fokus kehrt zum Schalter zurück.
Das Zustandsmodell
Markup und Logik zum Übernehmen
Der Schalter hat einen sichtbaren Namen. aria-controls zeigt auf die Navigation; das Skript hält Ansage und Sichtbarkeit zusammen.
HTML
<button type="button" id="menue-schalter"
aria-expanded="false" aria-controls="hauptmenue">
<span aria-hidden="true">☰</span>
Menü
</button>
<nav id="hauptmenue" aria-label="Hauptnavigation" hidden>
<ul>
<li><a href="/">Start</a></li>
<li><a href="/zimmer">Zimmer</a></li>
<li><a href="/anfahrt">Anfahrt</a></li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</nav>JavaScript
const schalter = document.querySelector('#menue-schalter');
const menue = document.querySelector('#hauptmenue');
function setzeMenue(offen) {
schalter.setAttribute('aria-expanded', String(offen));
menue.hidden = !offen;
}
schalter.addEventListener('click', () => {
const offen = schalter.getAttribute('aria-expanded') === 'true';
setzeMenue(!offen);
});
document.addEventListener('keydown', (event) => {
if (event.key !== 'Escape' || menue.hidden) return;
setzeMenue(false);
schalter.focus();
}); Ergänzen Sie in Ihrem Breakpoint dieselbe Zustandslogik: Auf dem Desktop muss die Navigation sichtbar sein, auch wenn sie mobil zuletzt geschlossen war. Vermeiden Sie eine CSS-Regel wie nav { display: block; }, die hidden überstimmt.
Abnahme in vier Tasten
So prüfen Sie es
- TabDas geschlossene Menü wird übersprungen.
- EnterDie Links erscheinen; der Schalter meldet „erweitert“.
- TabDer Fokus erreicht den ersten sichtbaren Link.
- EscDas Menü schließt und der Fokus steht wieder am Schalter.
Prüfen Sie zusätzlich bei 320 Pixel Breite und in 200 Prozent Zoom. Kein Link darf abgeschnitten sein oder horizontal aus dem sichtbaren Bereich laufen.
Vertiefen und gegenprüfen
Aus dem Prüfbericht
Zwei Stellen, zwei Befunde
Kritisch Die drei Striche haben keinen Namen Regel button-name
Das Symbol sagt nur „Schaltfläche“. Ein Wort im Button oder aria-label="Menü" liefert den Namen.
Zum Mitnehmen
Das Hamburger-Menü, korrigiert
Name und Zustand am Schalter, hidden am Menü. JavaScript wechselt beides.
Korrektur in 3 Schritten ansehen
Dem Schalter Namen und Zustand geben
aria-expanded sagt, ob das Menü offen ist. aria-controls verbindet Schalter und Menü.
KorrekturvergleichSchritt 1 · HTML Vorher
<button type="button" class="burger"> <span class="bar"></span><span class="bar"></span><span class="bar"></span> </button>Nachher
<button type="button" class="burger" aria-label="Menü" aria-expanded="false" aria-controls="hauptmenue"> <span class="bar"></span><span class="bar"></span><span class="bar"></span> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Tab auf die drei Striche. Ein Vorleseprogramm sagt „Menü, Schaltfläche, reduziert“.
Das geschlossene Menü wirklich schließen
hidden nimmt das Menü aus Anzeige und Tab-Reihenfolge. Beim Öffnen entfernt JavaScript das Attribut.
KorrekturvergleichSchritt 2 · HTML Vorher
<nav id="hauptmenue" class="drawer" aria-hidden="true"> <a href="/">Start</a> <a href="/zimmer">Zimmer</a> </nav>Nachher
<nav id="hauptmenue" class="drawer" hidden> <a href="/">Start</a> <a href="/zimmer">Zimmer</a> </nav>Markierte Zeilen wurden geändert
So prüfen Sie es Drücken Sie Tab bei geschlossenem Menü. Der Fokus geht direkt zum Inhalt, nicht ins Menü.
Öffnen und Schließen in JavaScript
Ein Klick wechselt aria-expanded und hidden zusammen. Escape schließt und gibt den Fokus zurück.
KorrekturvergleichSchritt 3 · JavaScript Vorher
burger.addEventListener('click', () => { drawer.classList.toggle('open'); });Nachher
burger.addEventListener('click', () => { const open = burger.getAttribute('aria-expanded') === 'true'; burger.setAttribute('aria-expanded', String(!open)); drawer.hidden = open; }); drawer.addEventListener('keydown', (event) => { if (event.key !== 'Escape') return; burger.setAttribute('aria-expanded', 'false'); drawer.hidden = true; burger.focus(); });Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie das Menü per Enter, drücken Sie Escape. Der Fokus steht wieder auf dem Schalter.