Menu Button: High Contrast Support
Example
Menu Button: Keyboard, ARIA and high contrast on WebEdit
High Contrast Support
- When
button
does not have focus, CSSborder
property is set to1px
. - When
button
does have focus, CSSborder
property is set to3px
and padding is reduced by2px
. - When
menuitem
does not have focus, CSSborder
property is set tonone
. - When
menuitem
does have focus, CSSborder
property is set to2px
and padding is reduced by2px
.
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