Rol Widget

`menuitem`

Markeert een element als een uitvoerbaar item binnen een menu of menubalk. Er is geen HTML-equivalent — menu's zijn een ARIA-exclusief construct. Gebruik deze rol alleen bij een echt menu (toepassingsstijl); een gewone navigatielijst mag GEEN menu/menuitem gebruiken.

Wanneer te gebruiken

Uitsluitend binnen een role="menu" of role="menubar", en alleen wanneer het menu een toepassingsmenu is — het type dat de Bestand/Bewerken/Beeld-balk van een desktoptoepassing nabootst, met één tabstop, pijltoetsnavigatie en Escape-om-te-sluiten.

De topnavigatie van een site is GEEN menu. Gebruik <nav> met een <ul> van <a>-links. Deze twee door elkaar halen is de meest voorkomende ARIA-fout op het web — het traps toetsenbordgebruikers in pijltoetsnavigatie wanneer Tab natuurlijker zou zijn, en vertelt schermlezers “toepassingsmenu” terwijl de inhoud gewoon links zijn.

Verwante rollen: menuitemcheckbox (voor menu-items die schakelen) en menuitemradio (voor exclusieve keuzes binnen een menu).

Toetsenbord- en focuscontract

Volgens het APG menu-patroon:

Tab opent en verlaat het menu — de focus landt bij het eerste menuitem bij binnenkomst. Tab doorloopt items NIET.
Pijl omhoog/omlaag verplaatst de focus tussen items (met omloop).
Pijl rechts/links opent submenu’s / keert terug naar de ouder.
Enter of Spatie activeert het gefocuste item.
Escape sluit het menu en retourneert de focus naar de trigger.
Het typen van een letter springt naar het volgende item dat met die letter begint (typeahead).

Gebruik een zwervende tabindex: alleen het huidig gefocuste menuitem heeft tabindex="0"; de rest heeft tabindex="-1".

Veelvoorkomende fouten

role="menuitem" gebruiken voor een gewone link in een sitenavigatie. Veroorzaakt toetsenbordvallen en onjuiste aankondiging door de schermlezer.
Elk menuitem heeft tabindex="0", zodat Tab elk item doorloopt. Het patroon is één tabstop.
Submenu’s die bij hover openen maar niet bij pijl rechts.
Escape sluit het submenu maar verliest de focus, waardoor de gebruiker buiten het menu vastloopt.
Items zonder toegankelijke namen doordat het pictogram de enige inhoud is — voeg aria-label toe.

Voorbeeld

<button id="fileBtn" aria-haspopup="menu" aria-expanded="false" aria-controls="fileMenu">
  Bestand
</button>
<ul id="fileMenu" role="menu" aria-labelledby="fileBtn" hidden>
  <li role="menuitem" tabindex="0">Nieuw</li>
  <li role="menuitem" tabindex="-1">Openen</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">
    Recent geopend
  </li>
  <li role="separator"></li>
  <li role="menuitem" tabindex="-1">Opslaan</li>
</ul>