Menu Button: Add ARIA roles, properties and states

Example

Menu Button example with ARIA markup support on WebEdit

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