Rolle Widget

`menuitem`

Markiert ein Element als ausführbaren Eintrag innerhalb eines Menüs oder einer Menüleiste. Es gibt kein HTML-Äquivalent — Menüs sind ein reines ARIA-Konstrukt. Diese Rolle sollte nur für ein echtes Menü im Anwendungsstil verwendet werden; eine einfache Navigationsliste sollte NICHT menu/menuitem verwenden.

Verwendung

Ausschließlich innerhalb von role="menu" oder role="menubar" — und nur dann, wenn es sich um ein Anwendungsmenü handelt: die Art, die die Datei-/Bearbeiten-/Ansicht-Leiste einer Desktop-Anwendung nachahmt, mit einem einzelnen Tab-Stopp, Pfeiltasten-Navigation und Esc-zum-Schließen.

Die Hauptnavigation einer Website ist KEIN Menü. Dafür verwendet man <nav> mit einer <ul> aus <a>-Links. Die Verwechslung dieser beiden Konstrukte ist der häufigste ARIA-Fehler im Web — sie zwingt Tastaturnutzer in eine Pfeiltasten-Navigation, obwohl Tab natürlicher wäre, und teilt Screenreadern „Anwendungsmenü“ mit, obwohl der Inhalt nur Links sind.

Verwandte Rollen: menuitemcheckbox (für Menüeinträge, die einen Zustand umschalten) und menuitemradio (für Auswahloptionen innerhalb eines Menüs, bei denen nur eine Option aktiv sein kann).

Tastatur- und Fokusvertrag

Gemäß dem APG-Menü-Muster:

Tab ruft das Menü auf und verlässt es — beim Eintreten wird der Fokus auf den ersten Menüeintrag gesetzt. Tab durchläuft die Einträge NICHT.
Pfeil-nach-oben/Pfeil-nach-unten verschieben den Fokus zwischen den Einträgen (mit Umlauf am Ende).
Pfeil-nach-rechts/Pfeil-nach-links öffnen Untermenüs bzw. kehren zum übergeordneten Eintrag zurück.
Enter oder Leertaste aktivieren den fokussierten Eintrag.
Escape schließt das Menü und gibt den Fokus an das auslösende Element zurück.
Das Eintippen eines Buchstabens springt zum nächsten Eintrag, der mit diesem Buchstaben beginnt (Typeahead).

Es wird ein wandernder Tabindex verwendet: nur der aktuell fokussierte Menüeintrag hat tabindex="0"; alle anderen haben tabindex="-1".

Häufige Fehler

Verwendung von role="menuitem" für einen einfachen Link in der Seitennavigation. Dies verursacht Tastaturfallen und eine falsche Screenreader-Ankündigung.
Jeder Menüeintrag hat tabindex="0", sodass Tab jeden einzelnen Eintrag durchläuft. Das Muster sieht einen einzigen Tab-Stopp vor.
Untermenüs, die sich beim Hover öffnen, aber nicht beim Drücken des Rechtspfeils.
Escape schließt das Untermenü, verliert aber den Fokus, sodass der Nutzer außerhalb des Menüs zurückbleibt.
Einträgen fehlt ein zugänglicher Name, weil nur ein Symbol als Inhalt vorhanden ist — in diesem Fall sollte aria-label hinzugefügt werden.

Beispiel

<button id="fileBtn" aria-haspopup="menu" aria-expanded="false" aria-controls="fileMenu">
  Datei
</button>
<ul id="fileMenu" role="menu" aria-labelledby="fileBtn" hidden>
  <li role="menuitem" tabindex="0">Neu</li>
  <li role="menuitem" tabindex="-1">Öffnen</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">
    Zuletzt geöffnet
  </li>
  <li role="separator"></li>
  <li role="menuitem" tabindex="-1">Speichern</li>
</ul>