Navigation Menu Button Example

Read This First

The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.

This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.

About This Example

This example demonstrates the Menu Button Pattern for a button that displays a menu of link targets. The menu items are made from HTML links, so they maintain their HTML link behaviors. That is, activating a menuitem loads the link target, and the browser's link context menu and associated actions are available.

In this implementation, an HTML button element reveals a menu structure made with an HTML ul element. The menuitem role is on the HTML a element contained by each li element so link behaviors are available when focus is set on the menu item. Another reason for applying the menuitem role to the a element instead of the li element is that the semantics of descendants of menuitem elements are not exposed in the accessibility tree. That is, an item in a menu can only be a menuitem because accessibility APIs do not enable assistive technologies to render elements contained inside of an item in a menu. For a more detailed description of this constraint, see Roles That Automatically Hide Semantics by Making Their Descendants Presentational.

Similar examples include:

Action Menu Button Example Using element.focus(): A button that opens a menu of actions or commands where focus in the menu is managed using element.focus().
Action Menu Button Example Using aria-activedescendant: A button that opens a menu of actions or commands where focus in the menu is managed using aria-activedescendant.

Example

Accessibility Features

A down arrow icon is included to help users understand that the button opens a menu.
To support operating system high contrast settings:
- Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused and other elements. Instead of using transparency, the focused element has a thicker border and less padding. When an element receives focus, its border changes from 1 to 3 pixels and padding is reduced by 2 pixels. When an element loses focus, its border changes from 3 pixels to 1 and padding is increased by 2 pixels.
- Because background color and text color styles can be overridden by operating system high contrast settings, a border is used to ensure the button has a visible boundary when high contrast mode is enabled.
- To ensure the arrow icons used to indicate the expanded or collapsed state have sufficient contrast with the background when high contrast settings invert colors, the CSS currentcolor value for the fill and stroke properties of the SVG polygon element is used to synchronize the color with text content. If specific colors are used to specify the fill and stroke properties, these colors will remain the same in high contrast mode, which could lead to insufficient contrast between the icon and the background or even make the icon invisible if its color matches the high contrast mode background.

Keyboard Support

Menu Button

Key	Function
`Down Arrow` `Space` `Enter`	Opens `menu` and moves focus to first `menuitem`
`Up Arrow`	Opens `menu` and moves focus to last `menuitem`

Key	Function
`Space` `Enter`	Activates the menu item, which is equivalent to activating the link element from which the menu item is made.
`Escape`	Closes the menu. Sets focus to the menu button.
`Up Arrow`	Moves focus to the previous menu item. If focus is on the first menu item, moves focus to the last menu item.
`Down Arrow`	Moves focus to the next menu item. If focus is on the last menu item, moves focus to the first menu item.
`Home`	Moves focus to the first menu item.
`End`	Moves focus to the last menu item.
`A-Z` `a-z`	Moves focus to the next menu item with a label that starts with the typed character if such an menu item exists. Otherwise, focus does not move.

Role, Property, State, and Tabindex Attributes

Menu Button

Attribute	Element	Usage
`aria-haspopup="true"`	`button`	Indicates the button opens a menu. NOTE: While ARIA does not include a role specifically for menu buttons, most platform accessibility APIs include a menubutton role. Consequently, on such platforms, assistive technologies, such as screen readers, identify buttons that have `aria-haspopup` set to either `true` or `menu` as menu buttons.
`aria-controls="ID_REFERENCE"`	`button`	Refers to the menu element controlled by the menu button. Optional attribute: assistive technology users can operate the menu if not present.
`aria-expanded="false"`	`button`	Indicates the menu is not displayed and that activating the menu button opens the menu.
`aria-expanded="true"`	`button`	Indicates the menu is displayed and that activating the menu button closes the menu.

Note

The label for the button is provided by the text content of the button element.

Role	Attribute	Element	Usage
`menu`		`ul`	Identifies the `ul` element as a `menu`.
	`aria-labelledby="ID_REFERENCE"`	`ul`	Refers to the element that contains the accessible name for the `menu`. The menu is labeled by the menu button.
`none`		`li`	Hides the implied `listitem` role of the `li` element from assistive technologies. For more details, see Hiding Semantics with the `presentation` Role.
`menuitem`		`a`	Identifies the element as a `menuitem`. The text content of the `a` element provides the accessible name of the `menuitem`.
	`tabindex="-1"`	`a`	removes the `a` element from the page tab sequence but keeps it focusable with JavaScript.

Assistive Technology Support

Learn how to interpret and use assistive technology support data

JavaScript and CSS Source Code

CSS: menu-button-links.css
Javascript: menu-button-links.js

HTML Source Code

To copy the following HTML code, please open it in CodePen.