Navigation Menu Button: Keyboard, ARIA and Focus Styling Support
Focus and Hover Styling Features
- Added 2px border for button and links.
- When the button or link gets focus, change the border, background and text color.
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.
-
Close menu and move focus back to button.
Accessibility Issues
- Poor high contrast support for focus styling.