ARIA: menubar role
{{AccessibilitySidebar}}
A menubar is a presentation of menu that usually remains visible and is usually presented horizontally.
Description
A menu is a widget that offers a list of choices to the user, such as a set of actions or functions. The menubar type of menu is usually presented as a persistently visible horizontal bar of commands. Menubars behave like native operating system menubars, such as the menubars containing pull down menus, commonly found at the top of many desktop application windows.
The menubar role is used to create a menu bar similar to those found near the top of the window in many desktop applications, visually persistent, typically horizontal, bar of menu items offering the user quick access to a consistent set of commands.
A menubar contains three types of menu items, including menuitem, menuitemradio and menuitemcheckbox. These menu items may optionally be nested in one or more group containers. Groups or items may optionally by separated with separator elements. While every menu item must be able to receive focus, even if disabled, the group and separator elements are not focusable.
An example of a native menubar is the bar which may be present at the top of the screen if you are reading this in a desktop browser. An example of a web-based menubar is the horizontal menu bar that reads “File Edit View Insert Format”, etc., which is usually visible under the document name in a Google doc.
Menubar interactions should be similar to the typical menu bar interaction in a desktop graphical user interface. In Google Docs, each of those menu items is a menuitem with a popup submenu, so each has an aria-haspopup attribute set to true. The menubar element does not.
The menubar and all the menu items are focusable and have a tabindex attribute set. When the menubar receives focus through tabbing, keyboard focus is placed on the first menuitem. Each item in the menu has tabindex set to -1, except the first item has which has its tabindex set to 0.
If a menubar receives focus as a result of a context action, such as a shortcut key, Escape or Enter may return focus to the invoking context. That said, make sure not to create shortcut keys that interfere with user agent, operating system, or assistive technology shortcuts - any UA, OS, or AT.
Every menu item, no matter how deeply nested, is able to receive focus, even if disabled.
If a menubar has a visible label, include aria-labelledby set to a value that refers to the labelling element. Otherwise, provide the menubar with an accessible name by including a descriptive aria-label.
A menuitem element in the menubar can contain a child submenu of menu items. Submenus can be nested several deep. Generally, the outer menubar is horizontal and all the submenus are vertical. If this is not the case, if your menubar is vertical, include aria-orientation="vertical" on the menubar element. Otherwise, this attribute is not necessary, as the default value is horizontal.
Associated WAI-ARIA roles, states, and properties
grouprole- : Identifies a set of menu items
menuitemrole- : An option in a set of choices contained by a
menubar. May have a submenu.
- : An option in a set of choices contained by a
menuitemradiorole- : A checkable menu item in a set of elements with the same role, only one of which can be checked at a time.
menuitemcheckboxrole- : a menu item with a checkable state whose possible values are
true,false, ormixed.
- : a menu item with a checkable state whose possible values are
aria-orientation- : Include
aria-orientation="vertical"onmenubarelement if it’s the menubar is vertical. The default orientation ishorizontal.
- : Include
Keyboard interactions
When focus is in a menubar it is always on a menu item within the menu bar. When focus is on a top level menuitem in a menu bar, the following keyboard interactions must be supported:
- Down Arrow
- : If the currently focused
menuitemhas a submenu, opens the submenu and places focus on the first item in the submenu.
- : If the currently focused
- Up Arrow
- : (Optional) If the currently focused
menuitemhas a submenu, opens the submenu and places focus on the last item in the submenu.
- : (Optional) If the currently focused
- Right Arrow
- : Moves focus to the next item, optionally wrapping from the last to the first.
- Left Arrow
- : Moves focus to the previous item, optionally wrapping from the first to the last.
- Home
- : If arrow key wrapping is not supported, moves focus to the first item in the
menubar.
- : If arrow key wrapping is not supported, moves focus to the first item in the
- End
- : If arrow key wrapping is not supported, moves focus to the last item in the
menubar.
- : If arrow key wrapping is not supported, moves focus to the last item in the
- Tab
- : Moves focus to the next element in the tab sequence. If that makes it exit the menubar, all submenus in the menubar get closed.
- shift + Tab
- : Moves focus to the previous element in the tab sequence. If that makes it exit the menubar, all submenus in the menubar get closed.
See menuitem keyboard interactions, menuitemradio keyboard interactions, and menuitemcheckbox keyboard interactions for more information on keyboard interactions when focus is on a menuitem in a menubar (which it always is).
Note: The above interactions assumed the menubar is horizontal. If the menubar is vertical, include aria-orientation="vertical" and change the following keyboard keys accordingly:
- Down Arrow
- : Performs like the Right Arrow as described above.
- Up Arrow
- : Performs like the Left Arrow as described above
- Right Arrow
- : Performs like the Down Arrow as described above.
- Left Arrow
- : Performs as the Up Arrow as described above
Examples
Specifications
{{Specifications}}