Kostenlose Navigations-Werkbank
Mobile Navigation kostenlos bauen.
Label und Verhalten wählen, Vorschau bedienen, Code übernehmen. Die Basis nutzt einen echten Button, normale Links, aria-expanded, hidden und Escape.
01 / Werkbank
Beschriften, bedienen, übernehmen.
Die Werkbank startet von selbst und zeigt die wichtigsten Zustände. Sobald Sie eingreifen, gehört sie Ihnen.
Bauplan 01—03
Vom Namen zum Zustandsvertrag
Kostenlos · lokal im Browser
02 Bedienen
Geschlossen · schließt nach Linkwahl
03 Übernehmen
<button id="nav-toggle" aria-expanded="false"
aria-controls="mobile-nav">Menü</button>
<nav id="mobile-nav" aria-label="Hauptnavigation" hidden>
<a href="/">Start</a>
<a href="/angebot">Angebot</a>
<a href="/kontakt">Kontakt</a>
</nav>
<script>
const toggle = document.querySelector('#nav-toggle');
const nav = document.querySelector('#mobile-nav');
const close = (restoreFocus = false) => {
nav.hidden = true;
toggle.setAttribute('aria-expanded', 'false');
if (restoreFocus) toggle.focus();
};
toggle.addEventListener('click', () => {
nav.hidden = !nav.hidden;
toggle.setAttribute('aria-expanded', String(!nav.hidden));
});
nav.addEventListener('click', e => { if (e.target.closest('a')) close(true); });
document.addEventListener('keydown', e => {
if (e.key === 'Escape' && !nav.hidden) close(true);
});
</script>Vertrag: Button steuert Navigation; Zustand und Sichtbarkeit bleiben synchron. Escape schließt und setzt den Fokus zurück.
02 / Der Unterschied
Ein Snippet ist der Anfang, nicht die Website.
Menüs scheitern an der Tastatur
Schalter ohne zugänglichen Namen, Fokus, der beim Schließen ins Leere fällt, und Escape ohne Wirkung sind die häufigsten Fehler mobiler Navigationen.
Der Check prüft die eingebaute Navigation
Auf Ihrer URL findet der Website-Check unbeschriftete Schalter, Kontrastprobleme und fehlende Fokusmarkierungen – direkt an der Stelle, an der sie auftreten.
Fundstellen statt Checkliste
Jeder Befund nennt Seite, Vorkommen und den konkreten nächsten Schritt. Kostenlos und ohne Installation.
03 / Auf Ihrer Website
Jetzt die eigene Navigation prüfen.
Die Werkbank erzeugt eine zugängliche Basis. Der Website-Check prüft, was auf Ihren Seiten tatsächlich eingebaut ist.
Der Website-Check ist bereit.
- 1URL
- 2Auswahl
- 3Prüfung
- 4Ergebnis