Standarder · ARIA

Rolle Sammensat widget

menu

Markerer en container som en appmenu — popup til File/Edit-lignende menuer eller kontekstmenuer. Der er ingen HTML-ækvivalent. En sides navigationsliste er IKKE en menu; brug <nav> med <ul> af links i stedet.

Hvornår brug det

Til en applikationsstyle menu — den popup, der vises fra en “Filer”-knap eller en højreklik-kontekstmenu, med pilnavigation og Escape-til-luk. Børn skal have role="menuitem", role="menuitemcheckbox", role="menuitemradio" eller role="separator".

Menurollen er applikationssemantik. Den hyppigste enkeltfejl på nettet er at bruge role="menu" til sitenavigation, hvilket fanger tastaturbrugere i pilnavigation, annoncerer links forkert som menupunkter og ødelægger brugerens mentale model.

Tommelfingerregel: hvis triggeren er et hyperlink, og elementerne er hyperlinks, er det navigation, ikke en menu. Brug <nav> og <ul>.

En menu SKAL have et tilgængeligt navn — brug aria-label eller aria-labelledby pegende på triggeren.

Tastatur- og fokuskontrakt

Jf. APG menu-mønsteret:

  • Trigger-knappen har aria-haspopup="menu" og aria-expanded. Aktivering af triggeren åbner menuen og flytter fokus til det første menuitem.
  • Inde i menuen: Pile op/ned flytter fokus mellem elementer; Home/End hopper til første/sidste.
  • Højrepil åbner en undermenu (hvis det fokuserede element har én); Venstrepil returnerer til forældremenuen.
  • Enter eller mellemrum aktiverer det fokuserede element og lukker menuen.
  • Escape lukker menuen og returnerer fokus til triggeren.
  • Forudindtastning: at skrive et bogstav hopper til næste element, der begynder med det bogstav.

Enkelt tab-stop: kun ét menuitem ad gangen har tabindex="0"; resten er -1.

Typiske fejl

  • role="menu" på et <nav>-element. Applikationssemantik tilsidesætter navigationssemantik — skærmlæsere holder op med at annoncere det som et navigationslandmærke.
  • Menu uden et paret aria-haspopup="menu" på dens trigger.
  • Escape lukker menuen, men returnerer ikke fokus til triggeren, hvilket efterlader brugeren uden anker.
  • Fokus flyttes IKKE til det første menuitem, når menuen åbnes — brugere skal tabbe sig igennem ingenting.
  • Undermenuer, der kun åbnes ved hover, ikke med tastatur.

Eksempel

<button id="actions" aria-haspopup="menu" aria-expanded="false" aria-controls="actionsMenu">
  Actions
</button>
<ul id="actionsMenu" role="menu" aria-labelledby="actions" hidden>
  <li role="menuitem" tabindex="0">Edit</li>
  <li role="menuitem" tabindex="-1">Duplicate</li>
  <li role="separator"></li>
  <li role="menuitem" tabindex="-1">Delete</li>
</ul>