menuitem

Hvornår brug det

Kun inde i en role="menu" eller role="menubar", og kun når menuen er en applikationsmenu — den slags, der efterligner en skrivebordsapplikations Filer/Rediger/Vis-bjælke, med enkelt tab-stop, pilnavigation og Escape-til-luk.

En sides topnavigation er IKKE en menu. Brug <nav> med en <ul> af <a>-links. Forvekslingen er den hyppigste ARIA-fejl på nettet — den fanger tastaturbrugere i pilnavigation, når Tab ville være mere naturligt, og den fortæller skærmlæsere “applikationsmenu”, når indholdet blot er links.

Søskenderollen: menuitemcheckbox (til menupunkter, der skifter tilstand) og menuitemradio (til eksklusive valg inde i en menu).

Tastatur- og fokuskontrakt

Jf. APG menu-mønsteret:

• Tab åbner og lukker menuen — fokus lander på det første menuitem ved åbning. Tab cykler IKKE igennem elementer.
• Pile op/ned flytter fokus mellem elementer (med ombrydning).
• Højre/Venstre åbner undermenuer / returnerer til forælder.
• Enter eller mellemrum aktiverer det fokuserede element.
• Escape lukker menuen og returnerer fokus til triggeren.
• At skrive et bogstav hopper til næste element, der begynder med det bogstav (forudindtastning).

Brug et rullende tabindex: kun det aktuelt fokuserede menuitem har tabindex="0"; resten har tabindex="-1".

Typiske fejl

• Brug af role="menuitem" til et almindeligt link i en sitenavigation. Medfører tastaturfælder og forkert skærmlæserannoncering.
• Hvert menuitem har tabindex="0", så Tab trin igennem hvert element. Mønsteret er enkelt tab-stop.
• Undermenuer, der åbnes ved hover men ikke ved Højrepil.
• Escape lukker undermenuen, men mister fokus og efterlader brugeren uden for menuen.
• Elementer mangler tilgængeligt navn, fordi ikonet er det eneste indhold — tilføj aria-label.

Eksempel

<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>