Ruolo Widget composito

`menubar`

Contrassegna un contenitore come menubar persistente — la striscia orizzontale sempre visibile dei menu in stile File/Modifica/Visualizza delle applicazioni desktop. Distinto da menu, che è un popup. Quasi mai il pattern corretto sul web.

Quando usarlo

Per una menubar persistente in stile applicativo che riproduce il menu principale di un’applicazione desktop (File, Modifica, Visualizza, …). Gli usi più legittimi si trovano in strumenti di authoring web, IDE e applicazioni di produttività a schermo intero.

Se la propria «menubar» è in realtà la navigazione dell’intestazione del sito, NON è una menubar. Si utilizzi <nav> con <ul> di link <a>. Il ruolo menubar richiede un singolo tab-stop, la navigazione con i tasti freccia e la chiusura con Escape — comportamenti che non corrispondono alle aspettative dell’utente per un’intestazione di sito.

I figli di una menubar sono di solito trigger role="menuitem" che aprono sottomenu (aria-haspopup="menu").

Contratto tastiera + focus

Secondo il pattern menubar APG:

Tab entra nella menubar sulla prima voce o sull’ultima selezionata; Tab porta fuori.
I tasti freccia Sinistra/Destra spostano il focus tra le voci di primo livello della menubar (con avvolgimento).
Il tasto freccia Giù (o Invio/Spazio) apre il sottomenu della voce attiva e sposta il focus sul suo primo menuitem.
Il tasto freccia Su apre il sottomenu e sposta il focus sull’ultimo menuitem.
Escape all’interno di un sottomenu chiude il sottomenu e restituisce il focus alla voce della menubar.
Typeahead: digitare una lettera salta alla voce successiva che inizia con quella lettera.

Si utilizzi un roving tabindex.

Errori comuni

role="menubar" sul <nav> primario del sito. Disallineamento tra il ruolo annunciato e le aspettative dell’utente.
Ogni voce ha tabindex="0", quindi Tab scorre tutte le voci della menubar. Il pattern prevede un singolo tab-stop.
Sottomenu che si aprono al passaggio del mouse ma non con il tasto freccia Giù.
Assenza di aria-haspopup/aria-expanded sulle voci della menubar che aprono sottomenu.
Escape all’interno di un sottomenu chiude il menu ma perde il focus — occorre tornare alla voce padre nella menubar.

Esempio

<ul role="menubar" aria-label="Documento">
  <li role="menuitem" tabindex="0"  aria-haspopup="menu" aria-expanded="false">File</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Modifica</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Visualizza</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Guida</li>
</ul>