Rooli Yhdistelmäwidget

`menubar`

Merkitsee säilön pysyväksi valikkoriviksi — aina näkyvissä olevaksi vaakasuoraksi Tiedosto/Muokkaa/Näytä-tyylisten valikkojen nauhaksi, jollainen löytyy työpöytäsovelluksista. Eroaa menu-roolista, joka on ponnahdusvalikko. Harvoin oikea malli verkossa.

Milloin käyttää

Pysyvälle sovellustyyliselle valikkonauhalle, joka jäljittelee työpöytäsovelluksen päävalikkoa (Tiedosto, Muokkaa, Näytä, …). Oikeutetuimmat käyttötapaukset ovat verkkopohjaisten kirjoitustyökalujen, IDE:iden ja koko näytön tuottavuussovellusten sisällä.

Jos “valikkonauha” on tosiasiassa sivuston ylätunnisteen navigointi, se EI ole menubar. Käytä <nav>:a, jossa on <ul> <a>-linkkejä. Menubar-rooli vaatii yhden tabulointipisteen, nuolinäppäinnavigoinnin ja Escape-sulkemisen — mikään näistä ei vastaa käyttäjän odotuksia sivuston ylätunnistetta kohtaan.

Menubar-elementin lapset ovat yleensä role="menuitem"-laukaisijoita, jotka avaavat alivalikoita (aria-haspopup="menu").

Näppäimistö- ja kohdistussopimus

APG menubar -mallin mukaan:

Tab siirtää kohdistuksen valikkonauhaan ensimmäiseen tai viimeksi kohdistettuun kohteeseen; Tab siirtää ulos.
Vasen/oikea-nuoli siirtää kohdistusta ylätason valikkonauhan kohteiden välillä (kiertäen).
Alas-nuoli (tai Enter/välilyönti) avaa kohdistetun kohteen alivalikon ja siirtää kohdistuksen sen ensimmäiseen menuitem-kohteeseen.
Ylös-nuoli avaa alivalikon ja siirtää kohdistuksen viimeiseen menuitem-kohteeseen.
Escape alivalikon sisällä sulkee alivalikon ja palauttaa kohdistuksen valikkonauhan kohteeseen.
Kirjoitusennakko: kirjaimen painaminen hyppää seuraavaan sillä alkavaan kohteeseen.

Käytä kiertävää tabindex-arvoa.

Yleiset virheet

role="menubar" sivuston ensisijaisessa <nav>-elementissä. Ilmoitettu rooli ja käyttäjän odotus ovat ristiriidassa.
Jokaisella kohteella on tabindex="0", jolloin Tab kierrättää jokaisen valikkonauhan kohteen läpi. Malli on yksi tabulointipiste.
Alivalikot, jotka avautuvat hiirenviemisellä, mutta eivät alas-nuolella.
Puuttuvat aria-haspopup/aria-expanded-attribuutit valikkonauhan kohteissa, jotka laukaisevat alivalikoita.
Escape alivalikon sisällä sulkee, mutta kohdistus katoaa — sen on palattava ylävalikon valikkonauhan kohteeseen.

Esimerkki

<ul role="menubar" aria-label="Asiakirja">
  <li role="menuitem" tabindex="0"  aria-haspopup="menu" aria-expanded="false">Tiedosto</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Muokkaa</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Näytä</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Ohje</li>
</ul>