Navigation · Tastaturlabor

`accessible mega menu`: Links bleiben Links.

Für Website-Navigation passt das Disclosure-Muster: echte Buttons öffnen gruppierte Links. Tab folgt der Lesereihenfolge, Escape schließt und führt zum Auslöser zurück.

01 / Live-Fokusfahrt

Panel öffnen, durchtabben, Escape testen.

Die Demo startet von selbst und zeigt die wichtigsten Zustände. Sobald Sie eingreifen, gehört die Fokusfahrt Ihnen.

Live-Fokusfahrt

Mega-Menü ohne App-Rollen

5/5 Verbindungen

Bauplan prüfen

Semantiknav + echte LinksAuslöserButton + aria-expandedEscapeschließt und gibt Fokus zurückFokusPanel bleibt beim Tabben offenGruppenSpalten haben Überschriften

Tastatur-Route

EnterPanel öffnen
TabLinks durchlaufen
EscSchließen + zurück

<nav aria-label="Hauptnavigation">
  <button type="button" aria-expanded="false" aria-controls="mega-panel">Lösungen</button>
  <div id="mega-panel" hidden>
    <h3>Analyse</h3>
    <ul><li><a href="/audit">Audit</a></li></ul>
  </div>
</nav>

02 / Der Unterschied

Ein Muster ist der Anfang, nicht die ganze Navigation.

App-Rollen auf Website-Links
Mega-Menüs mit role="menu" übernehmen den Pfeiltasten-Vertrag einer App. In der Praxis fehlen dann Escape, die Fokus-Rückgabe oder der normale Tab-Weg durch die Links.
Was der Check findet
Der Website-Check erkennt fehlende Navigationsbereiche, ARIA-Verweise ohne Ziel und Auslöser ohne nutzbaren Namen. Die Tastaturwege prüfen Sie danach wie hier im Labor.
Fundstellen mit nächstem Schritt
Jeder Befund nennt Seite, Vorkommen und die konkrete Korrektur – kostenlos und ohne Installation.

03 / Auf Ihrer Website

Jetzt die eigene Navigation prüfen.

Die Fokusfahrt zeigt das Muster. Der Website-Check prüft Ihre Navigation im echten Seitenkontext auf automatisch erkennbare Barrieren.

1URL
2Auswahl
3Prüfung
4Ergebnis

Bauplan prüfen

App-Rollen auf Website-Links

Was der Check findet

Fundstellen mit nächstem Schritt