menubar

Wann verwenden

Für eine persistente, anwendungsartige Menüleiste, die die Hauptmenüleiste einer Desktop-Anwendung nachbildet (Datei, Bearbeiten, Ansicht, …). Die legitimsten Einsatzbereiche sind webbasierte Autorenwerkzeuge, IDEs und Vollbild-Produktivitätsanwendungen.

Handelt es sich bei der „Menüleiste“ in Wirklichkeit um eine Website-Header-Navigation, ist es KEINE Menüleiste. <nav> mit <ul> aus <a>-Links sollte verwendet werden. Die menubar-Rolle erfordert einen einzigen Tab-Stopp, Pfeiltatsten-Navigation und Schließen per Escape — nichts davon entspricht den Erwartungen der Nutzenden an einen Website-Header.

Kindelemente einer Menüleiste sind üblicherweise role="menuitem"-Auslöser, die Untermenüs öffnen (aria-haspopup="menu").

Tastatur- und Fokus-Vertrag

Gemäß dem APG-Menüleisten-Muster:

• Tab setzt den Fokus in die Menüleiste auf den ersten oder zuletzt fokussierten Eintrag; Tab bewegt den Fokus heraus.
• Pfeil-links/Pfeil-rechts bewegt den Fokus zwischen den Einträgen der obersten Ebene (mit Umbruch).
• Pfeil-ab (oder Enter/Leertaste) öffnet das Untermenü des fokussierten Eintrags und setzt den Fokus auf dessen ersten Menüpunkt.
• Pfeil-auf öffnet das Untermenü und setzt den Fokus auf den letzten Menüpunkt.
• Escape innerhalb eines Untermenüs schließt das Untermenü und gibt den Fokus an den Menüleisteneintrag zurück.
• Schnellauswahl: Das Tippen eines Buchstabens springt zum nächsten Eintrag, der mit diesem Buchstaben beginnt.

Ein wandernder Tabindex ist zu verwenden.

Häufige Fehler

• role="menubar" auf der primären <nav> einer Website. Diskrepanz zwischen angekündigter Rolle und Nutzererwartung.
• Jeder Eintrag hat tabindex="0", sodass Tab alle Menüleisteneinträge durchläuft. Das Muster sieht einen einzigen Tab-Stopp vor.
• Untermenüs, die sich beim Hovern öffnen, aber nicht auf Pfeil-ab reagieren.
• Kein aria-haspopup/aria-expanded an Menüleisteneinträgen, die Untermenüs auslösen.
• Escape innerhalb eines Untermenüs klappt es ein, verliert aber den Fokus — der Fokus muss zum übergeordneten Menüleisteneintrag zurückkehren.

Beispiel

<ul role="menubar" aria-label="Document">
  <li role="menuitem" tabindex="0"  aria-haspopup="menu" aria-expanded="false">File</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Edit</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">View</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Help</li>
</ul>