Hamburger-Menü in WordPress
Prüfen Sie, was das Theme ausgibt
Menüschalter, Menülinks, Untermenü, Zustand: vier Stellen im Theme.
Navigationsblock im Block-Theme
Vom Editor bis zum offenen Menü
Stellen Sie das Overlay dort ein, wo es entsteht. Prüfen Sie danach die veröffentlichte Seite – denn Theme, Übersetzung und Erweiterungen können die Ausgabe verändern.
Bezeichnungen und Anordnung können je nach WordPress-Version und Sprache abweichen.
Vorschau der Kopfzeile
Navigation
Overlay-Menü
„Mobil“ zeigt auf kleinen Bildschirmen ein Symbol, das das Menü als Overlay öffnet.
Block-Theme: Einstellung im Navigationsblock
Öffnen Sie Design → Editor, dann Vorlagen → Template-Teile → Header. Wählen Sie den Navigationsblock und unter „Anzeige“ die Option „Mobil“.
Klassisches Theme: Schalter gehört zum Theme
Unter Design → Menüs bearbeiten Sie meist nur Links und Positionen. Aussehen, Name und Verhalten des mobilen Schalters kommen aus dem Theme. Suchen Sie dort nach einer Header- oder Mobilmenü-Einstellung – oder prüfen Sie dessen Vorlage.
Die Ausgabe zählt
Geschlossen und offen müssen zusammenpassen
Diese zwei Zustände sind eine Prüfansicht, kein WordPress-Screenshot. Die Markierungen zeigen, was Sie mit Tastatur und Vorleseprogramm beobachten.
Prüfroute auf der veröffentlichten Seite
WordPress Core kennzeichnet den Öffner derzeit mit aria-haspopup="dialog" und versieht den offenen Bereich dynamisch mit Dialog- und Modal-Semantik. Ein aria-expanded am Core-Öffner gehört nicht zu dieser Ausgabe. Prüfen Sie das tatsächlich geladene HTML statt ein Attribut nachzurüsten.
Aus dem Prüfbericht
Vier Regeln, vier Befunde
Kritisch Der Menüschalter des Themes hat keinen Namen Regel button-name
Das Theme ersetzt den WordPress-Schalter durch ein namenloses Symbol. Geben Sie der eigenen Schaltfläche eine Beschriftung wie „Menü öffnen“.
Kritisch Menüpunkte ohne Text Regel link-name
Ein Menüeintrag aus reinem Symbol bleibt namenlos. Im Menü-Editor gehört der Titel in das Feld für den Linktext.
Kritisch Der Untermenü-Pfeil steckt im Link Regel nested-interactive
Aufklappknopf und Menülink liegen ineinander. Stellen Sie den Knopf daneben, dann bleibt jeder für sich bedienbar.
Kritisch Der Zustand des Overlays ist ungültig Regel aria-valid-attr-value
aria-expanded trägt einen erfundenen Wert. Geschlossen ist false, offen ist true, gesetzt an derselben Stelle wie die Anzeige.
Zum Mitnehmen
Das WordPress-Menü, korrigiert
Drei Änderungen im ausgegebenen HTML des Themes.
Korrektur in 3 Schritten ansehen
Eigenen Theme-Schalter benennen
Bei einem selbst gebauten Theme-Schalter benennt aria-label die Aktion; aria-expanded darf nur true oder false sein. Der Core-Navigationsblock nutzt stattdessen Dialog-Semantik – ergänzen Sie dort aria-expanded nicht pauschal.
KorrekturvergleichSchritt 1 · HTML Vorher
<button class="menu-toggle" aria-expanded="vielleicht"> <span aria-hidden="true">☰</span> </button>Nachher
<button class="menu-toggle" aria-label="Menü öffnen" aria-expanded="false" aria-controls="hauptmenue"> <span aria-hidden="true">☰</span> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit der Tabulatortaste auf den eigenen Theme-Schalter. Ein Vorleseprogramm sagt seinen Namen und den geschlossenen Zustand an.
Den Aufklappknopf neben den Link setzen
Ein Bedienelement darf kein zweites enthalten. Nebeneinander bleiben Link und Aufklappknopf getrennt bedienbar und behalten ihre Namen.
KorrekturvergleichSchritt 2 · HTML Vorher
<a href="/leistungen">Leistungen <button type="button" aria-label="Untermenü öffnen">▾</button> </a>Nachher
<a href="/leistungen">Leistungen</a> <button type="button" aria-label="Untermenü öffnen">▾</button>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit der Tabulatortaste durch den Menüpunkt. Link und Knopf werden nacheinander angesagt.
Menüpunkte im Editor benennen
Der Titel aus dem Menü-Editor wird zum Linktext. Ein Symbol allein bleibt in der Linkliste eines Vorleseprogramms leer.
KorrekturvergleichSchritt 3 · HTML Vorher
<li><a href="/kontakt"><span aria-hidden="true">✉</span></a></li>Nachher
<li><a href="/kontakt">Kontakt</a></li>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Jeder Menüpunkt trägt dort seinen Namen.