Menu, Menubar und der Menü-Button

Ein ARIA-menu ist eine anwendungsähnliche Liste von Befehlen, etwa die Menüs „Datei“ oder „Bearbeiten“ in Desktop-Software, nicht die Hauptnavigation Ihrer Website. 🍔

Seitenlinks gehören in ein nav mit normalen Ankern. Verwenden Sie die Menürolle nur für echte Befehlssammlungen, sonst verwirren Sie Screenreader-Nutzende.

Das Pattern verwendet role="menu" für den Container, role="menuitem" für jeden Befehl und role="menubar" für eine horizontale, immer sichtbare Leiste.

Ein menu button ist ein echter Button, der ein Menü öffnet. Geben Sie ihm aria-haspopup="true", damit Nutzende wissen, dass ein Popup erscheint.

Der Menübutton schaltet aria-expanded zwischen true und false um, wenn sich sein Menü öffnet und schließt – genau wie jedes andere Disclosure-Steuerelement.

Wenn sich das Menü öffnet, verschieben Sie den focus hinein, auf das erste Menüelement. Der Button hat den Fokus nicht mehr, solange das Menü aktiv ist.

In einem vertikalen Menü bewegen Up and Down Arrow den Fokus zwischen den Elementen. In einer Menül­eiste bewegen Left and Right Arrow ihn entlang der übergeordneten Leiste.

Immer nur ein Menüelement befindet sich gleichzeitig in der Tab-Reihenfolge. Beim roving tabindex hat das fokussierte Element tabindex 0, die übrigen haben -1.

Enter oder die Leertaste führt den fokussierten Befehl aus und schließt das Menü. Nach der Auswahl eines Befehls sollte sich das Menü selbst schließen.

Escape schließt das Menü, ohne eine Aktion auszuführen, und setzt den Fokus zurück auf den Menübutton. So landet die Nutzerin oder der Nutzer genau dort, wo sie oder er begonnen hat.

Ein ausklappendes Untermenü verwendet aria-haspopup am übergeordneten menuitem. Right Arrow öffnet es, während Left Arrow es schließt und zurückkehrt.

Menüs sind für Befehle gedacht, nicht für Seitenverknüpfungen: Öffnen Sie sie mit einer Schaltfläche mit haspopup, verschieben Sie den Fokus hinein, navigieren Sie mit den Pfeiltasten und roving tabindex, und lassen Sie Escape den Fokus zurückbringen. ✅