Rol Samengestelde widget

`menubar`

Markeert een container als een permanente menubalk — de altijd zichtbare horizontale strook met Bestand/Bewerken/Beeld-stijlmenu's zoals in desktoptoepassingen. Verschilt van menu, dat een popup is. Op het web vrijwel nooit het juiste patroon.

Wanneer te gebruiken

Voor een permanente, toepassingsstijl menubalk die het hoofdmenu van een desktoptoepassing nabootst (Bestand, Bewerken, Beeld, …). De meest legitieme toepassingen zijn in webgebaseerde bewerkingstools, IDE’s en schermvullende productiviteitstoepassingen.

Als de “menubalk” eigenlijk een siteheadernavigatie is, is het GEEN menubalk. Gebruik <nav> met <ul> van <a>-links. De menubalkrol vereist één tabstop, pijltoetsnavigatie en Escape-om-te-sluiten — niets hiervan stemt overeen met de gebruikersverwachting voor een siteheader.

Kinderen van een menubalk zijn doorgaans role="menuitem"-triggers die submenu’s openen (aria-haspopup="menu").

Toetsenbord- en focuscontract

Volgens het APG menubar-patroon:

Tab plaatst de focus in de menubalk op het eerste of het laatst gefocuste item; Tab verplaatst de focus eruit.
Pijl links/rechts verplaatst de focus tussen menubalkitems op het hoogste niveau (met omloop).
Pijl omlaag (of Enter/Spatie) opent het submenu van het gefocuste item en verplaatst de focus naar het eerste menuitem.
Pijl omhoog opent het submenu en verplaatst de focus naar het laatste menuitem.
Escape binnen een submenu sluit het submenu en retourneert de focus naar het bijbehorende menubalkitem.
Typeahead: het typen van een letter springt naar het volgende item dat met die letter begint.

Gebruik een zwervende tabindex.

Veelvoorkomende fouten

role="menubar" op de primaire <nav> van een site. Discrepantie tussen aangekondigde rol en gebruikersverwachting.
Elk item heeft tabindex="0", zodat Tab door elk menubalkitem stept. Het patroon is één tabstop.
Submenu’s die bij hover openen maar niet bij de pijl omlaag.
Geen aria-haspopup/aria-expanded op menubalkitems die submenu’s triggeren.
Escape binnen een submenu sluit het submenu maar verliest de focus — moet terugkeren naar het bovenliggende menubalkitem.

Voorbeeld

<ul role="menubar" aria-label="Document">
  <li role="menuitem" tabindex="0"  aria-haspopup="menu" aria-expanded="false">Bestand</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Bewerken</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Beeld</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Help</li>
</ul>