WordPress Navigation Plugin
Was ein Menü-Plugin wirklich ausliefert
Menülink, Umschalter, Menüliste, Aufklappzustand: vier Stellen im erzeugten HTML.
Auswahlkarte
Vier Wege hinein. Ein Menü kommt im Browser an.
Wählen Sie nach Aufgabe und Theme. Prüfen Sie danach immer dieselbe Ausgabe.
Navigations-Block
Für eine übliche Navigation im Block-Theme.
- Einstieg
- Website-Editor
- Stärke
- Menü und Layout an einer Stelle
- Grenze
- Markup und Overlay kommen aus WordPress
Max Mega Menu
Für breite Panels, Spalten oder Inhalte im Untermenü.
- Einstieg
- Mega Menu › Menu Locations
- Stärke
- Mega-Menü und mobile Varianten
- Grenze
- Plugin, Theme und Inhalte wirken zusammen
Theme-Menü
Wenn das klassische Theme bereits passend ausgibt.
- Einstieg
- Design › Menüs
- Stärke
- Wenig zusätzliche Technik
- Grenze
- Verhalten und HTML gehören zum Theme
Eigener Code
Wenn Sie Ausgabe und Verhalten vollständig steuern müssen.
- Einstieg
- Child-Theme oder eigener Block
- Stärke
- Volle Kontrolle über das DOM
- Grenze
- Fokus und Zustände liegen bei Ihnen
Das gerenderte Menü im Browser
- Struktur
nav › ul › lierhält die Hierarchie. - NameLinks und Umschalter haben verständlichen Text.
- Zustand
aria-expandedentspricht sichtbar offen oder zu. - TastaturTab erreicht alles; Enter öffnet; Escape schließt.
Wenn es ein Plugin wird
Die Einbindung hängt am Theme
Max Mega Menu kann bei klassischen Themes eine registrierte Menüposition übernehmen, wenn das Theme sie mit wp_nav_menu() ausgibt. Ein Block-Theme erhält stattdessen eine eigene Position und fügt sie über den Max-Mega-Menu-Block ein.
wp_nav_menu() mit theme_location| Weg | Passt, wenn | HTML-Kontrolle | Tastatur | Grenze |
|---|---|---|---|---|
| Navigations-Block | Sie eine normale Navigation im Block-Theme bauen. | WordPress bestimmt die Kernstruktur. | Responsive Overlay und Untermenü sind vorgesehen. | Eigene Inhalte und CSS müssen Sie im Browser prüfen. |
| Max Mega Menu | das Untermenü Spalten, Bilder oder Blöcke braucht. | Das Plugin erzeugt Ausgabe und Zustände. | Tab, Enter, Leertaste und Escape sind dokumentiert. | Theme-Integration und eingefügte Inhalte bleiben Prüfflächen. |
| Theme-Menü | das vorhandene Theme bereits richtig funktioniert. | Das Theme besitzt Markup und Skript. | Nur der Test der konkreten Ausgabe gibt Auskunft. | Theme-Updates können die Ausgabe verändern. |
| Eigener Code | Sie eine konkrete DOM-Struktur oder Interaktion brauchen. | Sie steuern Markup, Fokus und Zustände. | Sie implementieren und testen jeden Zustand. | Kein Plugin übernimmt Wartung oder Regressionstests. |
Im Inspektor erwartet
Ein Untermenü bleibt normale Website-Navigation
W3C empfiehlt für typische Website-Navigation das Disclosure-Muster statt role="menu". Listen bilden die Hierarchie; ein echter Schalter meldet den Zustand.
<nav aria-label="Hauptnavigation">
<ul>
<li><a href="/" aria-current="page">Start</a></li>
<li>
<a href="/leistungen">Leistungen</a>
<button type="button"
aria-expanded="false"
aria-controls="leistungen-menue">
Untermenü Leistungen
</button>
<ul id="leistungen-menue" hidden>
<li><a href="/pruefung">Prüfung</a></li>
<li><a href="/umsetzung">Umsetzung</a></li>
</ul>
</li>
</ul>
</nav>So prüfen Sie es
Vier Beobachtungen entscheiden
- TabJeder Link und jeder Schalter erhält einen sichtbaren Fokus.
- Enter oder LeertasteDer Schalter öffnet; sein Zustand wechselt auf
true. - Weiter mit TabOffene Untermenülinks folgen in verständlicher Reihenfolge.
- EscapeDas Untermenü schließt und der Fokus kehrt zum Schalter zurück.
Aus dem Prüfbericht
Vier Stellen im Plugin-Menü
Kritisch Ein Menüpunkt ohne Text Regel link-name
Setzt das Plugin nur ein Symbol, bleibt der Link namenlos. Der Menütitel gehört als sichtbarer Text in den Link.
Kritisch Der Umschalter hat keinen Namen Regel button-name
Die drei Striche sind ein Zeichen ohne Wort. Ein aria-label am button benennt die Aktion, etwa „Menü öffnen“.
Kritisch Das Plugin-Menü ist keine Liste Regel list
Manche Mega-Menüs stapeln nur divs. Eine ul mit einem li je Punkt sagt an, wie viele Punkte es gibt.
Kritisch Der Aufklappzustand ist kein Zustand Regel aria-valid-attr-value
aria-expanded nimmt nur true oder false. Ein anderer Wert im Plugin-Markup sagt nicht, ob das Menü offen ist.
Zum Mitnehmen
Das Plugin-Menü, korrigiert
Ein Name, ein gültiger Zustand, eine echte Liste.
Korrektur in 3 Schritten ansehen
Den Umschalter benennen
Die drei Striche bleiben sichtbar und für Vorleseprogramme verborgen. aria-label liefert das Wort, aria-expanded meldet den geschlossenen Zustand.
KorrekturvergleichSchritt 1 · HTML Vorher
<button class="mega-toggle" aria-expanded="maybe"> <span aria-hidden="true">☰</span> </button>Nachher
<button class="mega-toggle" aria-expanded="false" aria-label="Menü öffnen"> <span aria-hidden="true">☰</span> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Mit Tab auf die drei Striche. Sie hören „Menü öffnen, Schaltfläche, zugeklappt“.
Jedem Menüpunkt sein Wort geben
Ein Symbol ohne Text lässt den Link namenlos. Der Menütitel steht im Link, das Symbol bleibt daneben ausgeblendet.
KorrekturvergleichSchritt 2 · HTML Vorher
<a class="mega-menu-link" href="/leistungen"> <span class="dashicons dashicons-star" aria-hidden="true"></span> </a>Nachher
<a class="mega-menu-link" href="/leistungen"> <span class="dashicons dashicons-star" aria-hidden="true"></span> Leistungen </a>Markierte Zeilen wurden geändert
So prüfen Sie es Im Menü steht neben jedem Symbol ein Wort. Kein Punkt bleibt leer.
Das Menü als Liste ausgeben
Ein Stapel aus divs nennt keine Anzahl. Eine ul mit einem li je Punkt gibt dem Menü seine Struktur zurück.
KorrekturvergleichSchritt 3 · HTML Vorher
<div class="mega-menu"> <a href="/leistungen">Leistungen</a> <a href="/kontakt">Kontakt</a> </div>Nachher
<ul class="mega-menu"> <li><a href="/leistungen">Leistungen</a></li> <li><a href="/kontakt">Kontakt</a></li> </ul>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm nennt beim Betreten des Menüs die Zahl der Einträge.