Rola Widget złożony

`menubar`

Oznacza kontener jako stały pasek menu — zawsze widoczny poziomy pasek w stylu Plik/Edycja/Widok znany z aplikacji desktopowych. Różni się od menu, które jest wyskakujące. W zastosowaniach webowych niemal nigdy nie jest właściwym wzorcem.

Kiedy stosować

Dla stałego paska menu w stylu aplikacji, który odzwierciedla główne menu aplikacji desktopowej (Plik, Edycja, Widok, …). Najbardziej uzasadnione zastosowania to webowe narzędzia do tworzenia treści, IDE i pełnoekranowe aplikacje produktywności.

Jeśli twój „pasek menu” jest w rzeczywistości nawigacją nagłówka serwisu, NIE jest to menubar. Użyj <nav> z <ul> zawierającym łącza <a>. Rola menubar wymaga jednego punktu tabulacji, nawigacji strzałkami i zamknięcia klawiszem Escape — żadna z tych cech nie odpowiada oczekiwaniom użytkownika wobec nagłówka serwisu.

Elementy potomne paska menu to zwykle wyzwalacze role="menuitem" otwierające podmenu (aria-haspopup="menu").

Klawiatura i zarządzanie fokusem

Zgodnie z wzorcem menubar APG:

Tab wchodzi do paska menu na pierwszą lub ostatnio fokusowaną pozycję; Tab wychodzi z paska.
Strzałki Lewo/Prawo przenoszą fokus między pozycjami najwyższego poziomu (z zawijaniem).
Strzałka w dół (lub Enter/Spacja) otwiera podmenu fokusowanej pozycji i przenosi fokus na jej pierwszą pozycję menuitem.
Strzałka w górę otwiera podmenu i przenosi fokus na ostatnią pozycję menuitem.
Escape wewnątrz podmenu zamyka podmenu i przywraca fokus na jego pozycję w pasku menu.
Typeahead: wpisanie litery przenosi fokus na następną pozycję zaczynającą się od tej litery.

Używaj ruchomego tabindex.

Częste błędy

role="menubar" na głównym <nav> serwisu. Niezgodność między ogłaszaną rolą a oczekiwaniami użytkownika.
Każda pozycja ma tabindex="0", przez co Tab przechodzi przez wszystkie pozycje paska. Wzorzec wymaga jednego punktu tabulacji.
Podmenu otwierane po najechaniu kursorem, ale nie po naciśnięciu strzałki w dół.
Brak aria-haspopup/aria-expanded na pozycjach paska menu wyzwalających podmenu.
Escape wewnątrz podmenu zwija menu, ale gubi fokus — musi wrócić do nadrzędnej pozycji paska menu.

Przykład

<ul role="menubar" aria-label="Dokument">
  <li role="menuitem" tabindex="0"  aria-haspopup="menu" aria-expanded="false">Plik</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Edycja</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Widok</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Pomoc</li>
</ul>