menuitem
Merkitsee elementin toiminnalliseksi kohteeksi valikon tai valikkonauhan sisällä. HTML-vastinetta ei ole — valikot ovat ARIA-exklusiivinen rakenne. Käytä tätä roolia vain rakentaessasi oikeaa valikkoa (sovellustyylinen); tavallinen navigaatiolista EI saa käyttää menu/menuitem-rakenteita.
Milloin käyttää
role="menu"- tai role="menubar"-elementin sisällä vain, ja ainoastaan kun valikko on sovellusvalikko — sellainen, joka jäljittelee työpöytäsovelluksen Tiedosto/Muokkaa/Näytä-palkkia yhden tabulointipisteen, nuolinäppäinnavigoinnin ja Esc-sulkemisen kanssa.
Sivuston ylänavigaatio EI ole valikko. Käytä <nav>:a, jossa on <ul> <a>-linkkejä. Näiden kahden sekoittaminen on verkossa yleisin ARIA-virhe — se loukkuuttaa näppäimistökäyttäjät nuolinäppäinnavigointiin, vaikka Tab olisi luontevampaa, ja kertoo ruudunlukuohjelmille “sovellusvalikko”, vaikka sisältö on vain linkkejä.
Sisaroolit: menuitemcheckbox (vaihtuvat valikkokohteet) ja menuitemradio (yksinoikeudelliset valinnat valikon sisällä).
Näppäimistö- ja kohdistussopimus
APG menu -mallin mukaan:
- Tab siirtää kohdistuksen valikkoon ja ulos — kohdistus laskeutuu ensimmäiseen menuitem-kohteeseen sisääntulon yhteydessä. Tab EI kierrätä kohteita.
- Ylös/alas-nuolet siirtävät kohdistusta kohteiden välillä (kiertäen).
- Oikea/vasen avaa alivalikoita / palaa ylävalikkoon.
- Enter tai välilyönti aktivoi kohdistetun kohteen.
- Escape sulkee valikon ja palauttaa kohdistuksen laukaisimeen.
- Kirjaimen painaminen hyppää seuraavaan sillä alkavaan kohteeseen (kirjoitusennakko).
Käytä kiertävää tabindex-arvoa: vain kohdistetulla menuitem-kohteella on tabindex="0"; muilla on tabindex="-1".
Yleiset virheet
role="menuitem":n käyttö tavalliselle linkille sivuston navigoinnissa. Aiheuttaa näppäimistöloukun ja väärän ruudunlukijailmoituksen.- Jokaisella menuitem-kohteella on
tabindex="0", jolloin Tab astuu jokaisen kohdan läpi. Malli on yksi tabulointipiste. - Alivalikot, jotka avautuvat hiirenviemisellä, mutta eivät oikea-nuolella.
- Escape sulkee alivalikon, mutta kohdistus katoaa, jolloin käyttäjä jää valikon ulkopuolelle harhaan.
- Kohteet, joilla ei ole saavutettavaa nimeä, koska kuvake on ainoa sisältö — lisää
aria-label.
Esimerkki
<button id="fileBtn" aria-haspopup="menu" aria-expanded="false" aria-controls="fileMenu">
Tiedosto
</button>
<ul id="fileMenu" role="menu" aria-labelledby="fileBtn" hidden>
<li role="menuitem" tabindex="0">Uusi</li>
<li role="menuitem" tabindex="-1">Avaa</li>
<li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">
Avaa viimeaikaiset
</li>
<li role="separator"></li>
<li role="menuitem" tabindex="-1">Tallenna</li>
</ul>