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 theid
of the element with themenu
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 therole="menu"
. - Container
ul
element has thearia-labelledby="id-mb"
to provide an accessible name for the menu. -
a
elements have therole="menuitem"
. -
li
elements have therole="none"
, since the list item semantics are not needed due to themenuitem
roles being on thea
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