Navigation Menubar Example - adopted from Mega menu

NOTE: This is based off the ARIA Practices example menu to show how it might be adopted as a horizontal mega menu that has heading columns. The CSS of course is just mock up. This is only for showing the ARIA roles states, properties, HTML and JavaScript keyboard behavior.

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

  1. Since the menubar presents a site navigation system, it is wrapped in a navigation region implemented with a nav element that has an aria-label that matches the label on the menubar.
  2. 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.

Accessibility Features

  1. Since the menubar presents a site navigation system, it is wrapped in a navigation region implemented with a nav element that has an aria-label that matches the label on the menubar.
  2. 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 accessible 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.
aria-expanded="false" a Indicates the submenu is closed.
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 accessible 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.
aria-expanded="false" a Indicates the submenu is closed.
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.

Javascript and CSS Source Code

HTML Source Code