Editor Menubar Example
The following example demonstrates using the
menubar design pattern
to provide access to sets of actions.
Each item in the below menubar identifies a category of text formatting actions that can be executed from its submenu.
The submenus also demonstrate menuitemradio
and menuitemcheckbox
elements.
Similar examples include:
- Navigation Menubar Example: A menubar that presents site navigation menus.
Example
Accessibility Features
- Users of assistive technologies can identify which format settings are selected because they are represented by menu item radio and menu item checkbox elements that have a checked state.
- Disabled menu items are demonstrated in the font size menu, which includes two disabled menuitems .
- The down arrow and checked icons are made compatible with high contrast mode and hidden from screen readers by using the CSS
content
property to render images.
Keyboard Support
Menubar
Key | Function |
---|---|
Space Enter |
Opens submenu and moves focus to first item in the submenu. |
Right Arrow |
|
Left Arrow |
|
Down Arrow | Opens submenu and moves focus to first item in the submenu. |
Up Arrow | Opens submenu and moves focus to last item in the submenu. |
Home | Moves focus to first item in the menubar. |
End | Moves focus to last item in the menubar. |
Character |
|
Submenu
Key | Function |
---|---|
Space Enter |
Activates menu item, causing action to be executed, e.g., bold text, change font. |
Escape |
|
Right Arrow |
|
Left Arrow |
|
Down Arrow |
|
Up Arrow |
|
Home | Moves focus to the first item in the submenu. |
End | Moves focus to the last item in the submenu. |
Character |
|
Role, Property, State, and Tabindex Attributes
Menubar
Role | Attribute | Element | Usage |
---|---|---|---|
menubar
|
ul
|
|
|
aria-label="string"
|
ul
|
|
|
menuitem
|
li
|
|
|
tabindex="-1"
|
li
|
Makes the menuitem element keyboard focusable but
not part of the Tab sequence of the page.
|
|
tabindex="0"
|
li
|
|
|
aria-haspopup="true"
|
li
|
Indicates that the menuitem has a submenu.
|
|
aria-expanded="true"
|
li
|
Indicates the submenu is open. | |
aria-expanded="false"
|
li
|
Indicates the submenu is closed. |
Submenu
Role | Attribute | Element | Usage |
---|---|---|---|
menu
|
ul
|
|
|
aria-label="string"
|
ul
|
Defines an acessible name for the menu .
|
|
menuitem
|
li
|
|
|
tabindex="-1"
|
li
|
Makes the item focusable but not part of the page tab sequence. | |
aria-disabled="false"
|
li
|
Used on the font size "Smaller" and "Larger" options to indicate they are active. | |
aria-disabled="true"
|
li
|
Used on the font size "Smaller" and "Larger" options to indicate one of the options is not active because the largest or smallest font has been selected. | |
menuitemcheckbox
|
li
|
|
|
tabindex="-1"
|
li
|
Makes the menuitemcheckbox focusable but not part of the page tab sequence. | |
aria-checked="true"
|
li
|
|
|
aria-checked="false"
|
li
|
|
|
group
|
ul
|
|
|
menuitemradio
|
li
|
|
|
tabindex="-1"
|
li
|
Makes the menuitemradio focusable but not part of the page tab sequence. | |
aria-checked="true"
|
li
|
|
|
aria-checked="false"
|
li
|
|
Javascript and CSS Source Code
- CSS: menubarAction.css
- Javascript: MenubarAction.js
- Javascript: MenubarItemAction.js
- Javascript: PopupMenuAction.js
- Javascript: PopupMenuItemAction.js
- Javascript: styleManager.js
HTML Source Code