Standards · ARIA

Rolle Zusammengesetztes Widget

menu

Kennzeichnet einen Container als Anwendungsmenü — das Popup von Datei/Bearbeiten-Menüs oder Kontextmenüs. Es gibt kein HTML-Äquivalent. Eine Navigationsliste einer Website ist KEIN Menü; stattdessen sollte <nav> mit <ul> aus Links verwendet werden.

Wann verwenden

Für ein anwendungsartiges Menü — das Popup, das über eine „Datei“-Schaltfläche oder ein Rechtsklick-Kontextmenü erscheint, mit Pfeiltatsten-Navigation und Schließen per Escape. Die Kindelemente müssen role="menuitem", role="menuitemcheckbox", role="menuitemradio" oder role="separator" tragen.

Die menu-Rolle ist Anwendungssemantik. Der weitaus häufigste Fehler im Web ist die Verwendung von role="menu" für die Seitennavigation, wodurch Tastaturnutzerinnen und -nutzer in der Pfeiltatsten-Navigation gefangen sind, Links fälschlicherweise als Menüpunkte angekündigt werden und das mentale Modell der Nutzenden zerbricht.

Faustregel: Wenn der Auslöser ein Hyperlink ist und die Einträge ebenfalls Hyperlinks sind, handelt es sich um Navigation, nicht um ein Menü. <nav> und <ul> sollten verwendet werden.

Ein Menü MUSS einen zugänglichen Namen haben — aria-label oder aria-labelledby mit Verweis auf den Auslöser sind zu verwenden.

Tastatur- und Fokus-Vertrag

Gemäß dem APG-Menü-Muster:

  • Die Auslöser-Schaltfläche hat aria-haspopup="menu" und aria-expanded. Das Aktivieren des Auslösers öffnet das Menü und setzt den Fokus auf den ersten Menüpunkt.
  • Im Menü: Pfeil-auf/Pfeil-ab bewegt den Fokus zwischen den Einträgen; Pos1/Ende springt zum ersten/letzten Eintrag.
  • Pfeil-rechts öffnet ein Untermenü (sofern der fokussierte Eintrag eines hat); Pfeil-links kehrt zum übergeordneten Menü zurück.
  • Enter oder Leertaste aktiviert den fokussierten Eintrag und schließt das Menü.
  • Escape schließt das Menü und gibt den Fokus an den Auslöser zurück.
  • Schnellauswahl: Das Tippen eines Buchstabens springt zum nächsten Eintrag, der mit diesem Buchstaben beginnt.

Einzelner Tab-Stopp: Nur ein menuitem hat jeweils tabindex="0"; alle übrigen haben -1.

Häufige Fehler

  • role="menu" auf einem <nav>-Element. Anwendungssemantik überschreibt Navigationssemantik — Screenreader kündigen es nicht mehr als Navigations-Landmark an.
  • Menü ohne zugehöriges aria-haspopup="menu" am Auslöser.
  • Escape schließt das Menü, gibt aber den Fokus nicht an den Auslöser zurück — die Nutzenden sind desorientiert.
  • Beim Öffnen des Menüs wird der Fokus nicht auf den ersten Menüpunkt gesetzt — Nutzende müssen durch nichts hindurch tabben.
  • Untermenüs, die sich nur beim Hovern öffnen, nicht per Tastatur.

Beispiel

<button id="actions" aria-haspopup="menu" aria-expanded="false" aria-controls="actionsMenu">
  Actions
</button>
<ul id="actionsMenu" role="menu" aria-labelledby="actions" hidden>
  <li role="menuitem" tabindex="0">Edit</li>
  <li role="menuitem" tabindex="-1">Duplicate</li>
  <li role="separator"></li>
  <li role="menuitem" tabindex="-1">Delete</li>
</ul>