menuitem

När du ska använda

Inuti ett role="menu" eller role="menubar" endast, och bara när menyn är en applikationsmeny — den typ som efterliknar en skrivbordsapps Fil/Redigera/Visa-rad, med enda tab-stop, pilnavigering och Esc för att stänga.

En webbplats topnavigering är INTE en meny. Använd <nav> med en <ul> av <a>-länkar. Att blanda ihop dessa är det vanligaste ARIA-misstaget på webben — det fångar tangentbordsanvändare i pilnavigering när Tab skulle vara mer naturligt, och det talar om för skärmläsare “applikationsmeny” när innehållet bara är länkar.

Syskonroller: menuitemcheckbox (för menyobjekt som växlar) och menuitemradio (för exklusiva val inuti en meny).

Tangentbords- och fokuskontrakt

Enligt APG:s menymönster:

• Tab anger och lämnar menyn — fokus hamnar på det första menyobjektet vid inträde. Tab cyklar INTE igenom objekt.
• Upp/ned-pilar flyttar fokus mellan objekt (med omslagning).
• Höger/vänster öppnar undermenyer / återgår till förälder.
• Enter eller Mellanslag aktiverar det fokuserade objektet.
• Escape stänger menyn och återger fokus till utlösaren.
• Att skriva en bokstav hoppar till nästa objekt som börjar med den bokstaven (förtypning).

Använd ett rörligt tabindex: bara det för tillfället fokuserade menyobjektet har tabindex="0"; resten har tabindex="-1".

Vanliga fel

• Att använda role="menuitem" för en vanlig länk i en webbplatsnavigering. Orsakar tangentbordsfällor och felaktigt skärmläsarmeddelande.
• Varje menyobjekt har tabindex="0", så Tab stegar igenom vart och ett. Mönstret är enda tab-stop.
• Undermenyer som öppnas vid hovring men inte med högerpil.
• Escape stänger undermenyn men tappar fokus, vilket lämnar användaren utanför menyn.
• Objekt som saknar tillgängliga namn eftersom ikonen är det enda innehållet — lägg till aria-label.

Exempel

<button id="fileBtn" aria-haspopup="menu" aria-expanded="false" aria-controls="fileMenu">
  File
</button>
<ul id="fileMenu" role="menu" aria-labelledby="fileBtn" hidden>
  <li role="menuitem" tabindex="0">New</li>
  <li role="menuitem" tabindex="-1">Open</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">
    Open recent
  </li>
  <li role="separator"></li>
  <li role="menuitem" tabindex="-1">Save</li>
</ul>