Standarder · ARIA

Rolle Sammensat widget

menubar

Markerer en container som en vedvarende menubjælke — den altid synlige vandrette stribe med Filer/Rediger/Vis-lignende menuer fra skrivebordsapplikationer. Adskilt fra menu, der er en popup. Næsten aldrig det rigtige mønster på nettet.

Hvornår brug det

Til en vedvarende, applikationsstyle menubjælke, der efterligner en skrivebordsapplikations hovedmenu (Filer, Rediger, Vis, …). De mest legitime anvendelser er i webbaserede redigeringsværktøjer, IDE’er og fuldskærms-produktivitetsapps.

Hvis ens “menubjælke” faktisk er en site-header-navigation, er det IKKE en menubar. Brug <nav> med <ul> af <a>-links. Menubar-rollen kræver enkelt tab-stop, pilnavigation og Escape-til-luk — ingen af delene matcher brugerforventningerne til en site-header.

Børn af en menubar er sædvanligvis role="menuitem"-triggere, der åbner undermenuer (aria-haspopup="menu").

Tastatur- og fokuskontrakt

Jf. APG menubar-mønsteret:

  • Tab indtaster menubjælken til det første eller sidst-fokuserede element; Tab bevæger sig UD.
  • Venstre/Højre pile flytter fokus mellem toplevel-menubjælkeelementer (med ombrydning).
  • Nedpil (eller Enter/mellemrum) åbner det fokuserede elements undermenu og flytter fokus til dets første menuitem.
  • Oppil åbner undermenuen og flytter fokus til det sidste menuitem.
  • Escape inde i en undermenu lukker undermenuen og returnerer fokus til dens menubjælkeelement.
  • Forudindtastning: at skrive et bogstav hopper til næste element, der begynder med det bogstav.

Brug et rullende tabindex.

Typiske fejl

  • role="menubar" på en sides primære <nav>. Mismatch mellem annonceret rolle og brugerforventning.
  • Hvert element har tabindex="0", så Tab cykler igennem hvert menubjælkeelement. Mønsteret er enkelt tab-stop.
  • Undermenuer, der åbnes ved hover men ikke ved nedpil.
  • Ingen aria-haspopup/aria-expanded på menubjælkeelementer, der udløser undermenuer.
  • Escape inde i en undermenu kollapser, men mister fokus — skal returnere til det overordnede menubjælkeelement.

Eksempel

<ul role="menubar" aria-label="Document">
  <li role="menuitem" tabindex="0"  aria-haspopup="menu" aria-expanded="false">File</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Edit</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">View</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Help</li>
</ul>