Navigation Menubar Example

NOTE: Please provide feedback on this example in issue 410.

The following implementation of the design pattern for menubar demonstrates a menubar that provides site navigation menus. Each item in the menubar represents a section of a web site for a mythical university and opens a submenu containing menu items that link to pages within that section.

Similar examples include:

Example

Accessibility Features

The down arrow and right arrow 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
  • Moves focus to the next item in the menubar.
  • If focus is on the last item, moves focus to the first item.
Left Arrow
  • Moves focus to the previous item in the menubar.
  • If focus is on the first item, moves focus to the last item.
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
  • Moves focus to next item in the menubar having a name that starts with the typed character.
  • If none of the items have a name starting with the typed character, focus does not move.

Submenu

Key Function
Space
Enter
  • Activates menu item, causing the link to be activated.
  • NOTE: the links go to dummy pages; use the browser go-back function to return to this menubar example page.
Escape
  • Closes submenu.
  • Moves focus to parent menubar item.
Right Arrow
  • If focus is on an item with a submenu, opens the submenu and places focus on the first item.
  • If focus is on an item that does not have a submenu:
    • Closes submenu.
    • Moves focus to next item in the menubar.
    • Opens submenu of newly focused menubar item, keeping focus on that parent menubar item.
Left Arrow
  • Closes submenu and moves focus to parent menu item.
  • If parent menu item is in the menubar, also:
    • moves focus to previous item in the menubar.
    • Opens submenu of newly focused menubar item, keeping focus on that parent menubar item.
Down Arrow
  • Moves focus to the next item in the submenu.
  • If focus is on the last item, moves focus to the first item.
Up Arrow
  • Moves focus to previous item in the submenu.
  • If focus is on the first item, moves focus to the last item.
Home Moves focus to the first item in the submenu.
End Moves focus to the last item in the submenu.
Character
  • Moves focus to the next item having a name that starts with the typed character.
  • If none of the items have a name starting with the typed character, focus does not move.

Role, Property, State, and Tabindex Attributes

Menubar

Role Attribute Element Usage
menubar ul
  • Identifies the element as a menubar container for a set of menuitem elements.
  • Is not focusable because focus is managed using roving tabindex.
aria-label="string" ul
  • Defines an acessible name for the menubar.
  • Helps assistive technology users understand the purpose of the menubar and distinguish it from any other menubars or similar elements on the page.
menuitem a
  • Identifies the element as a menu item.
  • The accessible name is calculated from the text content of the a element.
tabindex="-1" a Makes the a element keyboard focusable, but not part of the tab sequence.
tabindex="0" a
  • Includes the element in the Tab sequence.
  • Only one menubar item has tabindex="0".
  • On page load, the first menubar item has tabindex="0".
  • Focus is managed using roving tabindex.
aria-haspopup="true" a Indicates the menuitem has a submenu.
aria-expanded="true" a Indicates the submenu is open. (See note below.)
aria-expanded="false" a Indicates the submenu is closed. (See note below.)
none li
  • Removes the implied listitem role of the li element.
  • Necessary because the parent ul is serving as a menu so the li elements are not in their required list context.

Submenu

Role Attribute Element Usage
menu ul Identifies the element as a menu container for a set of menu items.
aria-label="string" ul
  • Defines an acessible name for the menu.
  • Helps assistive technology users understand the purpose of the menu and distinguish it from any other menu or similar elements (e.g. menubar) on the page.
menuitem a
  • Identifies the element as a menu item.
  • The accessible name is calculated from the text content of the a element.
tabindex="-1" a Keeps the a element focusable but removes it from the Tab sequence.
aria-haspopup="true" a Indicates the menu item has a submenu.
aria-expanded="true" a Indicates the submenu is open. (See note below.)
aria-expanded="false" a Indicates the submenu is closed. (See note below.)
none li
  • Removes the implied listitem role of the li element.
  • Necessary because the parent ul is serving as a menu so the li elements are not in their required list context.

Note

Currently, using aria-expanded on elements with role menuitem triggers HTML validation errors because the ARIA specification does not yet support doing so. The ARIA working group plans to resolve this issue in the next version of the specification. Until a version of ARIA that resolves the issue becomes a W3C recommendation, it is safe to ignore these validation errors. Alternatively, since only a few browser and assistive technology combinations exploit this feature of the pattern, it can be omitted from implementations.

Javascript and CSS Source Code

HTML Source Code