Navigation Menu Button: Keyboard, ARIA and High Contrast Support

High Contrast Features

• When button does not have focus, CSS border property is set to 1px.
• When button does have focus, CSS border property is set to 3px and padding is reduced by 2px.
• When menuitem does not have focus, CSS border property is set to none.
• When menuitem does have focus, CSS border property is set to 2px and padding is reduced by 2px.

ARIA Markup Features

Button Element

• Button element has the default role of button.
• aria-haspopup="true" attribute.
• aria-controls attribute references the id of the element with the menu role.
• aria-expanded="true" when menu is open, otherwise attribute is not present.
• Accessible name for the button comes from the text content of the button element.

Menu and Menuitem Elements

• Container ul element has the role="menu".
• Container ul element has the aria-labelledby="id-mb" to provide an accessible name for the menu.
• a elements have the role="menuitem".
• li elements have the role="none", since the list item semantics are not needed due to the menuitem roles being on the a elements.
• Accessible name for the menu items comes from the text content of the anchor elements.

Keyboard Features

Includes keyboard support required by the menu button design pattern:

• Button opens menu moves keyboard focus to a menu option.
  • Space
  • Enter
  • Up arrow
  • Down arrow
• Move through menu options with cursor keys.
  • Up arrow
  • Down arrow
  • Home
  • End
• Move through menu options with first letter keys.
• A-Z
• a-z
• Close menu and move focus back to button.
  • Escape

Accessibility Issues

• Poor high contrast support for focus styling.