WAI-ARIA: Role=Menubar

A presentation of menu that usually remains visible and is usually presented horizontally 

Description

A presentation of menu that usually remains visible and is usually presented horizontally.
The menubar role is used to create a menu bar similar to those found in Windows, Mac, and Gnome desktop applications. A menu bar is used to create a consistent set of frequently used commands. Authors SHOULD ensure that menubar interaction is similar to the typical menu bar interaction in a desktop graphical user interface.
To be keyboard accessible, authors SHOULD manage focus of descendants for all instances of this role, as described in Managing Focus.
Elements with the role menubar have an implicit aria-orientation value of horizontal

Role=Menubar Example

HTML Example 1

<ul role="menubar"><!-- Rule 2A: "File" label via aria-labelledby --><li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span><ul role="menu"><!-- Rule 2C: "New" label via Namefrom:contents --><li role="menuitem" aria-haspopup="false">New</li><li role="menuitem" aria-haspopup="false">Open…</li>...</ul></li>...</ul>

HTML Example 2

In the example below, a popup menu is associated with its label using the aria-labelledby attribute:

<div role="menubar"><div role="menuitem" aria-haspopup="true" id="fileMenu">File</div><div role="menu" aria-labelledby="fileMenu"><div role="menuitem">Open</div><div role="menuitem">Save</div><div role="menuitem">Save as ...</div>...</div>...</div>

Characteristics

Superclass Role

• menu

Related Concepts

• toolbar

Required Owned Elements

• group → menuitemradio
• menuitem
• menuitemcheckbox
• menuitemradio

Inherited States and Properties

• aria-activedescendant
• aria-atomic
• aria-busy (state)
• aria-controls
• aria-current (state)
• aria-describedby
• aria-details
• aria-disabled (state)
• aria-dropeffect
• aria-errormessage
• aria-expanded (state)
• aria-flowto
• aria-grabbed (state)
• aria-haspopup
• aria-hidden (state)
• aria-invalid (state)
• aria-keyshortcuts
• aria-label
• aria-labelledby
• aria-live
• aria-orientation
• aria-owns
• aria-relevant
• aria-roledescription

Name From

• author

Implicit Value for Role

• Default for aria-orientation is horizontal

Semantic HTML

No HTML element equivalent.

Reference

• WAI-ARIA 1.2 Specification
  Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=menubar.