Menu and Menubar

What is a Menubar?

A menubar is the horizontal menu bar typically found at the top of an application window, displaying items like "File / Edit / View…". Opening each item reveals a submenu (a list of commands). It is used to provide a rich command structure similar to desktop applications.

Why Does Accessibility Matter?

• Keyboard-only users. A menubar should be entered with a single Tab, navigated with ←→ across the bar, opened with ↓/Enter to reveal a submenu, items selected with ↑↓, and closed with Esc — all of these interactions are required.
• Screen reader users. role="menubar" /role="menu" / role="menuitem" combined with aria-haspopup /aria-expanded correctly convey the structure and open/closed state.

Live Demo (Recommended Implementation)

Below is an application-style menubar (simulating a text editor). Since this executes commands, the menu role is appropriate. Try operating it with the keyboard.

Keyboard Interactions

Required WAI-ARIA Roles & Properties

Implementation: Recommended Pattern (Good)

Markup:

<div role="menubar" aria-label="Text Editor">
  <button type="button" role="menuitem"
          aria-haspopup="menu" aria-expanded="false" tabindex="0">
    File
  </button>
  <ul role="menu" aria-label="File" hidden>
    <li role="menuitem" tabindex="-1">New</li>
    <li role="menuitem" tabindex="-1">Open</li>
    <li role="menuitem" tabindex="-1">Save</li>
  </ul>

  <button type="button" role="menuitem"
          aria-haspopup="menu" aria-expanded="false" tabindex="-1">
    Edit
  </button>
  <ul role="menu" aria-label="Edit" hidden>
    <li role="menuitem" tabindex="-1">Undo</li>
    <li role="menuitem" tabindex="-1">Redo</li>
  </ul>
</div>

Key handling outline:

// Top-level (bar) menuitems use roving tabindex as a single tab stop.
//  ← →  to move within the bar, ↓/Enter to open a submenu and focus the first item.
// Within a submenu: ↑↓ to move, Esc to close and return to parent, ← → to move to adjacent menu.
top.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowRight') moveTop(+1);
  else if (e.key === 'ArrowLeft') moveTop(-1);
  else if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ')
    openSub(top, 0);   // Open and focus the first item
  else if (e.key === 'ArrowUp') openSub(top, 'last');
});

subItem.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowDown') focusNextItem();
  else if (e.key === 'ArrowUp') focusPrevItem();
  else if (e.key === 'Escape') { closeSub(); top.focus(); } // Return to parent
  else if (e.key === 'ArrowRight' || e.key === 'ArrowLeft')
    moveToAdjacentMenu(e.key);  // Move to adjacent menu
  else if (e.key === 'Enter' || e.key === ' ') run(subItem);
});

Anti-pattern (Bad)

Below is an example of site navigation using role="menubar" with:hover-triggered submenus. It combines role misuse with hover dependency.

<!-- ❌ Anti-pattern: Using menu role on site navigation with hover-triggered submenus -->
<nav>
  <ul role="menubar">
    <li role="menuitem">Products
      <!-- Only opens on hover & using menu role on links breaks screen reader announcements -->
      <ul role="menu" class="sub">
        <li role="menuitem"><a href="/a">Feature A</a></li>
        <li role="menuitem"><a href="/b">Feature B</a></li>
      </ul>
    </li>
    <li role="menuitem"><a href="/price">Pricing</a></li>
  </ul>
</nav>

<style>
  .sub { display: none; }
  li:hover .sub { display: block; } /* Hover-dependent */
</style>

Implementation Checklist

• Confirmed the use case is application commands (not site navigation)
• Bar has role="menubar" + aria-label; items have role="menuitem"
• Items with submenus have aria-haspopup="menu" + aria-expanded
• Bar uses roving tabindex for one tab stop; Left / Right Arrow to navigate
• Submenus have role="menu"; items have tabindex="-1"
• Down Arrow / Enter opens submenu to first item; Up / Down to navigate; Home / End to jump to ends
• Escape closes submenu and returns to parent item; Left / Right moves to adjacent menu
• Not hover-dependent and focus is visible

Source (English):Menu and Menubar Pattern — W3C APG(opens in a new tab)