Menus Tutorial (W3C WAI)
Quelle / bibliografische Angaben
Mehrseitiges Tutorial der W3C WAI. Ausgewertet wurden drei Seiten:
- Übersicht: https://www.w3.org/WAI/tutorials/menus/
- Structure: https://www.w3.org/WAI/tutorials/menus/structure/
- Fly-out Menus: https://www.w3.org/WAI/tutorials/menus/flyout/
Alle abgerufen 2026-09-12 über Firecrawl. Ein Datum steht im erfassten Hauptinhalt nicht. Die Codebeispiele fehlen im erfassten Text weitgehend, ausgewertet ist nur der Fließtext.
Dokumentart und Kontext
Informatives Tutorial der WAI, keine normative Vorgabe. Die Seite „Styling“ und „Application Menus“ wurden nicht ausgewertet.
Kurzfassung
Menüs sollen ihre Struktur im Markup abbilden, beschriftet sein, den aktuellen Punkt kennzeichnen und Untermenüs so anbieten, dass Maus-, Tastatur- und Touch-Nutzer sie bedienen können.
Kernaussagen mit Fundstellen
- Warum: Screenreader- und Tastaturnutzer brauchen bedienbares Markup. Touch-Nutzer und Menschen mit feinmotorischen Einschränkungen brauchen große Ziele, und Untermenüs sollen nicht sofort verschwinden, wenn die Maus den Bereich verlässt (Übersicht).
- Liste: Menüs als
ulauszeichnen, damit assistive Technologien die Anzahl der Punkte ansagen können.olnur, wenn die Reihenfolge Bedeutung hat (Structure). - Identifizieren und beschriften: Menü möglichst mit
navauszeichnen und mit Überschrift,aria-labeloderaria-labelledbybenennen, damit sich mehrere Menüs unterscheiden lassen (Structure). - Aktueller Punkt: entweder unsichtbarer Text wie „Current Page:“ und
spanstatt Link, oderaria-current="page", wenn der Link bleiben muss (Structure). - Responsive: Die Menüstruktur bleibt über Bildschirmgrößen konsistent. Sichtbare Punkte behalten Reihenfolge, Wortlaut und Ziel (Structure).
- Untermenüs kennzeichnen: visuell mit Icon und im Markup mit
aria-expanded(Fly-out). - Maus: Ein Skript verzögert das Schließen beim Verlassen, im Beispiel um eine Sekunde (Fly-out).
- Tastatur: Untermenüs sollen nicht beim Durchtabben aufgehen. Stattdessen öffnet der Elternpunkt per Aktivierung (wenn er selbst kein Link ist) oder ein separater Button neben dem Elternlink (wenn dieser auf eine Seite führt).
aria-expandedwird dabei mitgeführt (Fly-out).
Eigene Einordnung
Das Tutorial beschreibt eine Umsetzung mit Skripten und aria-expanded von Hand. Die Grundregeln – Liste, Label, aria-current, Button statt Hover-only – gelten unabhängig davon, ob man heute popover einsetzt.