Example taken and abused from http://www.oaa-accessibility.org/example/25/
A menu type of widget that offers the user a list of choices. It is often a list of links to important sections of a document or a site. The menu role is appropriate when the list of links is presented in a manner similar to a menu on a desktop application. A menubar is also considered a form of menu. A menu should manage the focus of its descendants.
Sometimes a menu item will launch a dialog box. This is indicated using "…" (ellipsis) at the end of the menu item label. An example is "Save as …".
When presenting a menu, ensure that it is completely visible on screen.
If a menu bar item has focus and the menu is not open, then:
Enter, Space, and the up down arrow keys opens the menu and places focus on the first menu item in the opened menu or child menu bar.
Left or right arrow keys move focus to the adjacent menu bar item.
When a menu is open and focus is on a menu item in that open menu, then
Enter or Space invokes that menu action (which may be to open a submenu).
Up Arrow or Down Arrow keys cycle focus through the items in that menu.
Escape closes the open menu or submenu and returns focus to the parent menu item.
If the menu item with focus has a submenu, pressing Enter, Space, or the right arrow key opens the submenu and puts focus on the first submenu item.
When a submenu is open and focus is on a menu item in that submenu:
Up Arrow or Down Arrow keys cycle through the submenu items (behaves the same as open menu).
Escape or the Left Arrow key closes the submenu and returns focus to the parent menu item.
Typing a letter (printable character) key moves focus to the next instance of a visible node whose title begins with that printable letter.
First item in menu bar should be in the tab order (tabindex=0).
Disabled menu items receive focus but have no action when Enter or Left Arrow/Right Arrow is pressed. It is important that the state of the menu item be clearly communicated to the user.
Tabbing out of the menu component closes any open menus.
With focus on a menu item and a sub menu opened via mouse behavior, pressing down arrow moves focus to the first item in the sub menu.
With focus on a menu item and a sub menu opened via mouse behavior, pressing up arrow moves focus to the last item in the sub menu.
With focus on a submenu item, the user must use arrows or the Escape key to progressively close submenus and move up to the parent menu item(s).
At the top level, Escape key closes any sub menus and keeps focus at the top level menu.
A menu is a container of options.
The container may have a role of menu or menubar depending on your implementation. A menubar is usually rendered horizontally.
The menu contains elements with roles: menuitem, menuitemcheckbox, or menuitemradio depending on your implementation.
If activation of a menuitem produces a popup menu, then the menuitem has aria-haspopup set to "true" so that an assistive technology knows that the menuitem has a sub menu.
menuitemcheckbox and menuitemradio set aria-checked to "true" when checked.
Menu focus is managed by the menu using tabindex or aria-activedescendant.
A menuitem within a menu or menubar may appear in the tab order only if it is not within a popup menu.
Each menuitem is usually a DOM child of its menu or menubar in the DOM tree.
A menuitem that is not a DOM child of the menu or menubar is referenced by the menu or menubar using aria-owns and will appear in order at the end of the list of menuitems. Therefore, ensure that navigation to each menuitem follows this order.
Grouping of menuitems in a menu or menubar is performed by introducing an element with the role of separator.
A separator delineates groups of menu items within a menu or menubar.
A separator is not placed in the navigation order and it is in no way interactive.
Authors provide an aria-orientation consistent with the separator's orientation in the menu or menubar. Since the separator is not navigable it does not support the aria-expanded state.
It is recommended that when grouping menu items of type menuitemradio that they all be grouped together preceding or following a separator.