Accessible Menu
Das Menü, das sagt, was es ist
Schalter, Zustand, verborgene Links: vier Stellen, an denen ein Menü verstummt.
Muster richtig wählen
Erst das Ziel. Dann die Rolle. Dann die Tasten.
„Menü“ bezeichnet vier Oberflächen mit zwei grundverschiedenen Aufgaben.
Die erste Frage
Was geschieht nach der Auswahl?Die Auswahl öffnet eine Seite
Nutzen Sie Links. Tab bewegt sich von Ziel zu Ziel.
Die Auswahl verändert die Anwendung
Ein ARIA-Menü braucht verwalteten Fokus und Pfeiltasten.
Navigationsleiste
- HTML
<nav>, Liste, Links- Tasten
- TabEnter
Passend für: Haupt-, Bereichs- und Fußnavigation.
Aufklapp-Navigation
- HTML
- Button mit
aria-expanded, Liste, Links - Tasten
- TabEnter / LeertasteTab
Passend für: Untermenü oder Navigation auf schmalen Ansichten.
Anwendungsmenü
- ARIA
menubar,menu,menuitem- Tasten
- Tab← ↑ ↓ →Enter
Passend für: Befehle wie in Editor oder Zeichenprogramm.
Kontextmenü
- ARIA
menuam gewählten Objekt- Tasten
- Windows/Linux: Umschalt + F10↑ ↓Enter / Escape
Passend für: Befehle zu einer Zeile, Karte oder Datei.
menu ändert deshalb auch die Tastaturerwartung. Für die normale Website
Beginnen Sie mit <nav>, einer Liste und echten Links. Ergänzen Sie zum Aufklappen einen benannten Button mit aria-expanded. Verwenden Sie role="menu" nur, wenn Sie das vollständige Anwendungsmenü-Verhalten bauen.
So prüfen Sie es
Die Tasten verraten das Muster
- Tab
Website-Navigation: Jeder Button und Link erhält einen eigenen Halt.
- Enter / Leertaste
Aufklapp-Schalter: Der Zustand wechselt und
aria-expandedfolgt sichtbar. - Pfeile
Anwendungsmenü: Der Fokus wandert innerhalb des Menüs, Tab verlässt es.
- Escape
Geöffnete Ebene: Sie schließt und der Fokus kehrt zum Auslöser zurück.
Passendes Muster weiterbauen
Aus dem Prüfbericht
Vier Stellen, vier Befunde
Kritisch Der Menü-Schalter hat keinen Namen Regel button-name
Drei Striche sagen nur „Schaltfläche“. Das Wort „Menü“ neben dem Symbol wird zum Namen.
Kritisch Die Einträge sind nur Symbole Regel link-name
Ein Symbol-Link hat keinen Text. Der Name der Seite gehört in den Link.
Kritisch aria-expanded="maybe" ist kein Wert Regel aria-valid-attr-value
Nur true und false sind erlaubt. Sonst weiß niemand, ob das Menü offen ist.
Zum Mitnehmen
Das Menü, korrigiert
Ein Schalter mit Wort und Zustand, ein Menü mit hidden.
Korrektur in 2 Schritten ansehen
Dem Schalter Wort und Zustand geben
Das Wort im Button ist der Name. aria-expanded trägt den Zustand, aria-controls das Ziel.
KorrekturvergleichSchritt 1 · HTML Vorher
<button type="button" aria-expanded="maybe"> <svg aria-hidden="true"><use href="#icon-menu"></use></svg> </button>Nachher
<button type="button" aria-expanded="false" aria-controls="menue"> <svg aria-hidden="true"><use href="#icon-menu"></use></svg> Menü </button>Markierte Zeilen wurden geändert
So prüfen Sie es Tab auf den Schalter. Ein Vorleseprogramm sagt „Menü, Schaltfläche, reduziert“.
Einträge benennen und das Menü schließen
Jeder Link trägt den Namen seiner Seite. hidden nimmt das geschlossene Menü aus dem Tab-Weg.
KorrekturvergleichSchritt 2 · HTML Vorher
<ul id="menue" aria-hidden="true"> <li><a href="/leistungen"><svg aria-hidden="true"><use href="#a"></use></svg></a></li> <li><a href="/kontakt"><svg aria-hidden="true"><use href="#b"></use></svg></a></li> </ul>Nachher
<ul id="menue" hidden> <li><a href="/leistungen">Leistungen</a></li> <li><a href="/kontakt">Kontakt</a></li> </ul>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie das Menü per Enter, dann Tab. Ein Vorleseprogramm sagt „Leistungen, Link“.