Mobile Navigation Software
Was ein Menü aus dem Baukasten liefern muss
Menüknopf, Menüpunkte, geschlossenes Panel: drei Stellen zum Abnehmen.
Auswahl statt Produktliste
Welche Lösung passt zu Ihrem Menü?
Entscheiden Sie nach Ausgabe und Pflegeverantwortung. Ein bekannter Name im Backend sagt noch nichts darüber, wie Knopf, Panel und Fokus im Browser funktionieren.
Erst prüfen: Brauchen Sie ein einklappbares Menü?
Drei kurze Ziele können auch auf 320 Pixel Breite direkt sichtbar bleiben. Dann entfallen Schalter, Zustandslogik und ein verborgenes Panel vollständig.
- Start
- Arbeit
- Kontakt
Qualitatives Entscheidungsmodell
Je näher am Code, desto direkter die Korrektur
Die Positionen sind eine redaktionelle Einordnung, keine Produktwertung. „Pflege“ meint: Wer hält Verhalten und Updates funktionsfähig?
Theme oder Plugin
Oberfläche bedienen
Passt, wenn der Standard ausreicht und die veröffentlichte Ausgabe prüfbar ist.
Grenze Fehlende Attribute lassen sich oft nur über Hooks oder Vorlagen ändern.
CMS-Kernfunktion
WordPress-Navigationsblock
Passt, wenn ein Block-Theme bereits die Kopfzeile verwaltet.
Grenze Theme, Übersetzung und Erweiterungen können die Ausgabe beeinflussen.
Komponentenbibliothek
Baustein im Projekt
Passt, wenn das Projekt bereits dieselbe Bibliothek und deren JavaScript nutzt.
Grenze Dokumentiertes Beispiel und tatsächliche Version müssen übereinstimmen.
Eigene Implementierung
Markup und Zustand selbst
Passt, wenn Sie das Verhalten testen und dauerhaft pflegen können.
Grenze Fokus, Escape, Sichtbarkeit und Zustände liegen vollständig bei Ihnen.
Vor der Shortlist
Welches Verhalten soll die Software liefern?
„Hamburger-Menü“ beschreibt nur das Symbol. Für die Abnahme zählt, ob dahinter eine Aufklappfläche im Dokument oder ein modaler Dialog liegt.
Zustandaria-expanded folgt sichtbar/verborgen.
Tab läuft bei geöffnetem Panel durch Links und danach in die Seite weiter.
Geeignet wenn die Navigation Teil des normalen Seitenflusses bleibt.
Zustand Der offene Bereich braucht passende Dialog- und Modal-Semantik.
Tab bleibt im Dialog; Escape schließt; Fokus kehrt zum Öffner zurück.
Geeignet wenn das Overlay den restlichen Bildschirm wirklich blockiert.
Vier Abnahme-Gates für jede Shortlist
Der Schalter wird als „Hauptmenü öffnen“ oder gleichwertig angesagt.
Verborgene Links fehlen im Tab-Weg und sind nicht nur optisch verschoben.
Alle Ziele, Untermenüs und der Schließweg sind mit Tastatur erreichbar.
Escape schließt ein Overlay; der Fokus landet wieder an einer logischen Stelle.
Kann ein Anbieter keines dieser Ergebnisse auf einer Testseite zeigen, fehlt Ihnen eine prüfbare Grundlage für die Auswahl. Ein Screenshot der Einstellungen ersetzt die Abnahme im Browser nicht.
Aus dem Prüfbericht
Drei Befunde am ausgegebenen HTML
Kritisch Der Menüknopf der Vorlage bleibt namenlos Regel button-name
Liefert das Theme nur ein Symbol aus, prüfen Sie im veröffentlichten HTML, ob der Knopf einen zugänglichen Namen trägt.
Kritisch Menüpunkte ohne sichtbaren Text Regel link-name
Ersetzt die Software Beschriftungen durch Symbole, fehlt dem Link sein Name. Tragen Sie ihn im Menüeintrag ein.
Zum Mitnehmen
Das Menü der Vorlage, korrigiert
Drei Stellen im ausgegebenen HTML, die jede Vorlage liefern muss.
Korrektur in 3 Schritten ansehen
Den Menüknopf der Vorlage benennen
Bringt das Theme kein Feld für die Beschriftung mit, ergänzen Sie das aria-label im Template. Das Symbol bleibt verborgen.
KorrekturvergleichSchritt 1 · HTML Vorher
<button type="button" class="menu-toggle"> <span aria-hidden="true">☰</span> </button>Nachher
<button type="button" class="menu-toggle" aria-label="Hauptmenü ö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 Tab auf den Knopf. Ein Vorleseprogramm sagt „Hauptmenü öffnen“.
Symbolpunkte mit Namen ausgeben
Tragen Sie im Menüeintrag den sichtbaren Namen ein. Ein Symbol allein liefert der Linkliste kein Ziel.
KorrekturvergleichSchritt 2 · HTML Vorher
<a class="wp-block-navigation-item__content" href="/team"> <span aria-hidden="true">👥</span> </a>Nachher
<a class="wp-block-navigation-item__content" href="/team"> <span aria-hidden="true">👥</span> Team </a>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Der Eintrag heißt „Team“.
Das Panel mit hidden schließen
Setzt eine Vorlage nur aria-hidden, können fokussierbare Nachfahren erreichbar bleiben. hidden nimmt das geschlossene Panel aus der Darstellung und dem Tab-Weg.
KorrekturvergleichSchritt 3 · HTML Vorher
<nav id="hauptmenue" class="mobile-nav" aria-hidden="true"> <a href="/team">Team</a> </nav>Nachher
<nav id="hauptmenue" class="mobile-nav" hidden> <a href="/team">Team</a> </nav>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie bei geschlossenem Menü mit Tab weiter. Der Fokus überspringt die Einträge.