Menu Button: High Contrast Support

Example

Menu Button: Keyboard, ARIA and high contrast on WebEdit

High Contrast Support

  • 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

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.

HTML Source Code


CSS Source Code


Javascript Source Code