Navigation Menubar Example

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

Following are two implementations of the design pattern for menubar that demonstrate how a menubar can be used for site navigation. Each item in the two menubars represents a section of a web site for a mythical university and opens a pull down menu with links to pages within that section. The two examples differ only in how they are coded; see notes that follow each example.

Similar examples include:

Examples

Example 1: Menubar With ARIA Markup in the HTML Source

Notes

  1. This example includes the ARIA roles and properties in the source code for authors to easily see which elements the roles and properties need to be included.
  2. This is useful for people writing their own scripts to see which elements need roles and properties.
  3. CSS :after is used to render the down arrow in a menubar item using the CSS content property string using entity values.
  4. CSS :after is used to render right arrow using the CSS content property string using entity values in pull down menu items that have sub-menus.

Example 2: ARIA markup added dynamically

Notes

  1. This example includes the ARIA roles and properties are added by the scripts based on the structure of the HTML elements.
  2. This can be used by authors to more easily add this script to their own projects and websites.

Keyboard Support

Menubar

Key Function
Space or Enter
  • Open or Close popup menu (e.g. toggle).
Left Arrow
  • Moves focus to previous menubar menu item.
  • If focus on first menubar menu item, focus is moved to last menubar menu item.
Right Arrow
  • Moves focus to next menubar menu item.
  • If focus on last menubar menu item, focus is moved to first menubar menu item.
Down Arrow
  • Open popup menu.
  • Moves focus to first popup menu item.
Up Arrow
  • Open popup menu.
  • Moves focus to last popup menu item.
Home
  • Moves focus to first menubar menu item.
End
  • Moves focus to last menubar menu item.
Character
  • Moves focus to next menubar item that starts with that letter.
  • If no menubar menu item starts with the letter, focus does not move.

Popup Menu

Key Function
Space or Enter
  • Follow link.
  • NOTE: In this example all the links go to dummy pages, use back key to return to the page with the menubar.
Escape
  • Closes popup menu.
  • Moves focus to current menubar menu item.
Left Arrow
  • Closes popup menu.
  • Moves focus to previous menubar menu item.
  • Open the popup menu of the previous menubar menuitem with focus.
Right Arrow
  • Closes popup menu.
  • Moves focus to next menubar menu item.
  • Open the popup menu of the next menubar menuitem with focus.
Up Arrow
  • Moves focus to previous popup menu item.
  • If first popup menu item, focus is moved to the last popup menu item.
Down Arrow
  • Moves focus to next popup menu item.
  • If last popup menu item, focus is moved to the first popup menu item.
Home
  • Moves focus to first popup menu item.
End
  • Moves focus to last popup menu item.
Character
  • Moves focus to the next popup item that starts with that letter.
  • If no popup menu item starts with the letter, focus does not move.

Role, Property, State, and Tabindex Attributes

Menubar

Role Attribute Element Usage
menubar ul
  • Identifies a ARIA menubar widget.
  • No tabindex value is needed since the role=menubar does not receive focus.
  • Accessible name for the menu is defined by the aria-label attribute.
aria-label="string" ul
  • Defines an acessible name for the menu bar.
  • Used to help people understand the purpose of the menubar and uniquely identify the menubar from other menubars on the page.
menuitem a
  • Identifies a ARIA menuitem in the menubar widget.
  • Accessible name for the menuitem is defined by the text content of the a element.
tabindex="-1" a
  • Makes the a element keyboard focusable, but not part of tab order of the page.
tabindex="0" a
  • Makes the a element keyboard focusable and part of tab order of the page.
  • Only one menubar item should have tabindex="0".
  • The default menubar item with tabindex="0" is the first menubar item (e.g page is loaded).
  • The last menubar item to have focus is given the tabindex="0" so that when user tabs through the page focus will be given to the last menubar item that the user used.
aria-haspopup="true" a
  • Identifies the menuitem as a controller for a popup menu.
  • The menuitem is only to open and close the popup menu it cannot be a link.
aria-expanded="true" a
  • Indicates popup menu is open.
aria-expanded="false" a
  • Indicates popup menu is closed.
none li
  • Hides li element native role semantics of listiem from assistive technologies.
  • If native role semantics of the li element are not removed, it could confuse some users of assistive technologies since listitems and menuitems would be interspersed with each other.

Popup Menu

Role Attribute Element Usage
menu ul
  • Identifies a ARIA menu widget.
  • No tabindex value is needed since the role=menu does not receive keyboard focus.
  • Accessible name for the menu is defined by the aria-label attribute.
aria-label="string" ul
  • Defines an acessible name for the menu.
  • Used to help people understand the purpose of the menu and uniquely identify the menu from other menubars on the page.
menuitem a
  • Identifies a ARIA menuitem in the menu widget.
  • Accessible name for the menuitem is defined by the text content of the a element.
tabindex="-1" a
  • Makes the a element keyboard focusable, but not part of tab order of the page.
aria-haspopup="true" a
  • Identifies the menuitem as a controller for a popup menu.
  • The menuitem is only to open and close the popup menu it cannot be a link.
aria-expanded="true" a
  • Indicates popup menu is open.
aria-expanded="false" a
  • Indicates popup menu is closed.
none li
  • Hides li element native role semantics of listiem from assistive technologies.
  • If native role semantics of the li element are not removed, it could confuse some users of assistive technologies since listitems and menuitems would be interspersed with each other.

Javascript and CSS Source Code

HTML Source Code

Example 1: Menubar With ARIA Markup in the HTML Source

Example 2: ARIA markup added dynamically