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

01 Beschriften

Sichtbarer Text und zugänglicher Name.

02 Nach Linkwahl

02 Bedienen

Nordlicht

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.

  1. 1URL
  2. 2Auswahl
  3. 3Prüfung
  4. 4Ergebnis
Kostenlos starten · keine Installation

Die Basis steht. Jetzt die Seite dahinter prüfen.

Kostenlos starten: URL eingeben und konkrete technische Warnsignale mit Fundstellen erhalten.