Rooli Yhdistelmäwidget

`menu`

Merkitsee säilön sovellusvalikoksi — Tiedosto/Muokkaa-tyylisten ponnahdusvalikkojen tai kontekstivalikoiden käyttöön. HTML-vastinetta ei ole. Sivuston navigaatiolista EI ole valikko; käytä <nav>-elementtiä, jonka sisällä on <ul> linkkejä.

Milloin käyttää

Sovellustyyliselle valikolle — ponnahdusikkunalle, joka ilmestyy “Tiedosto”-painikkeesta tai hiiren oikealla painikkeella, nuolinäppäinnavigoinneilla ja Escape-sulkemisella. Lasten on oltava role="menuitem", role="menuitemcheckbox", role="menuitemradio" tai role="separator".

Menu-rooli on sovellussemantiikkaa. Suurin yksittäinen virhe verkossa on role="menu":n käyttö sivuston navigointiin, mikä loukkuuttaa näppäimistökäyttäjät nuolinäppäinnavigointiin, ilmoittaa linkit menuitem-kohteina ja rikkoo käyttäjän mielikuvamallin.

Nyrkkisääntö: jos laukaisin on hyperlinkki ja kohteet ovat hyperlinkkejä, kyse on navigoinnista, ei valikosta. Käytä <nav> ja <ul>.

Valikolla TÄYTYY olla saavutettava nimi — käytä aria-label:a tai aria-labelledby:tä osoittamaan laukaisimeen.

Näppäimistö- ja kohdistussopimus

APG menu -mallin mukaan:

Laukaisupainikkeella on aria-haspopup="menu" ja aria-expanded. Laukaisimen aktivointi avaa valikon ja siirtää kohdistuksen ensimmäiseen menuitem-kohteeseen.
Valikon sisällä: ylös/alas-nuolet siirtävät kohdistusta kohteiden välillä; Home/End hyppää ensimmäiseen/viimeiseen.
Oikea nuoli avaa alivalikon (jos kohdistetulla kohteella on sellainen); vasen nuoli palaa ylävalikkoon.
Enter tai välilyönti aktivoi kohdistetun kohteen ja sulkee valikon.
Escape sulkee valikon ja palauttaa kohdistuksen laukaisimeen.
Kirjoitusennakko: kirjaimen painaminen hyppää seuraavaan sillä alkavaan kohteeseen.

Yksi tabulointipiste: vain yhdellä menuitem-kohteella kerrallaan on tabindex="0"; muilla on -1.

Yleiset virheet

role="menu" <nav>-elementillä. Sovellussemantiikka ohittaa navigaatiosemantiikan — ruudunlukuohjelmat lakkaavat ilmoittamasta sitä navigaatiomaamerkkinä.
Valikko ilman paria aria-haspopup="menu" laukaisimessaan.
Escape sulkee valikon, mutta ei palauta kohdistusta laukaisimeen, jolloin käyttäjä jää harhaan.
Kohdistus EI siirry ensimmäiseen menuitem-kohteeseen valikon avautuessa — käyttäjien täytyy tabuloida tyhjyyden läpi.
Alivalikot, jotka avautuvat vain hiirenviemisellä, eivät näppäimistöllä.

Esimerkki

<button id="actions" aria-haspopup="menu" aria-expanded="false" aria-controls="actionsMenu">
  Toiminnot
</button>
<ul id="actionsMenu" role="menu" aria-labelledby="actions" hidden>
  <li role="menuitem" tabindex="0">Muokkaa</li>
  <li role="menuitem" tabindex="-1">Kopioi</li>
  <li role="separator"></li>
  <li role="menuitem" tabindex="-1">Poista</li>
</ul>