Description
A menu button is a kind of button that, when activated, displays a menu of
options or actions in a dropdown or flyout menu.
Menu buttons add behavior to a generic button and need to meet the
accessibility criteria for
buttons.
When to use
Use a menu button to group a set of related commands or options in a menu that
is available on demand and does not always need to be presented to the user.
A menu itself may contain a menu button to place a subgroup of related command
in a submenu. This is a common pattern for a “More Actions ...” context menu.
A menu button should not be used to open navigation links in a menu because
taking action on a link in what is perceived as a menu could cause an unexpected
change of context. Instead, use a disclosure button for that purpose. See Site
Navigation for
further details.
Examples
The native HTML <button> element is the foundation for a menu button, with
ARIA attributes added to convey its role and state.
Menu button code example
1<button
2 id="file-actions"
3 aria-controls="file-menu"
4 aria-expanded="false"
5 aria-haspopup="menu"
6>
7 File Actions
8</button>
9<div id="file-menu" role="menu" aria-labelledby="file-actions">
10 <button role="menuitem">New Document</button>
11 <button role="menuitem">Save</button>
12 <button role="menuitem">Print</button>
13</div>
Relevant ARIA attributes
The previous example illustrates the use of ARIA attributes for a menu button.
| Attribute | How to use |
|---|
aria-haspopup | Set this property to "menu" or "true" on the menu button to inform screen readers that an interactive menu can be presented in a popup by activating the menu button. |
aria-expanded | Set this state attribute to "false" on the menu button when the menu is available and "true" otherwise to indicate the state of the associated popup menu. |
aria-controls | Set this property to the id of the associated menu element to inform assistive technologies of the element that is controlled. The associated menu element should have an accessible name that references the opening menu button, such as was provided with the application of aria-labelledby in the example. |
An accessible button component can be created using a generic HTML element by
adding button behavior with JavaScript. See the Button entry for details and
additional ARIA requirements. When using a custom button as a menu button, apply
the additional ARIA attributes listed in Relevant ARIA
attributes just as should be done for a native HTML
menu button.
Structure and semantics
All users must be able to identify a menu button, understand its relationship to
the menu it controls, and perceive its open and closed states. Structure and
semantics are conveyed to assistive technologies through the appropriate use of
semantic HTML elements and ARIA attributes.
Evinced accessibility analysis checks accessible menu button structure and
semantics in the following tests:
Role
A menu button must have the ARIA role button. Refer to Role in the Button
entry for further details.
A menu button must have an accessible name. Refer to Button Name in the
Button entry for further details.
Aria expanded
A menu button should convey its open and closed state to assistive technologies
with an aria-expanded attribute.
Missing aria-expanded value
| Standard | Criteria |
|---|
| WCAG | 1.3.1 Info and Relationships |
| EN 301 549 | 9.1.3.1 Info and Relationships |
| Section 508 | N/A |
Impact: Serious
The aria-expanded attribute is essential for the menu button. Without it, or
if its value does not change, screen reader users are not informed of the menu’s
visibility state.
Conflicting aria-expanded value
| Standard | Criteria |
|---|
| WCAG | 1.3.1 Info and Relationships |
| EN 301 549 | 9.1.3.1 Info and Relationships |
| Section 508 | N/A |
Impact: Critical
The aria-expanded attribute must accurately reflect the visual state of the
menu. If the menu is open, it must be true; if closed, it must be false. A
conflict prevents screen reader users from knowing if the menu is visible or
not.
The aria-haspopup attributes indicates that a menu is available in a popup and
that it can be accessed with arrow keys. The role of the the associated menu
must be menu.
Missing or invalid aria-haspopup attribute
| Standard | Criteria |
|---|
| WCAG | 1.3.1 Info and Relationships |
| EN 301 549 | 9.1.3.1 Info and Relationships |
| Section 508 | N/A |
Impact: Minor
The aria-haspopup attribute should be used to indicate that the button
controls a menu. Best practice is to set it to menu, although the value true
will also implicitly inform screen readers that there is a controlled menu.
Forbidden interactive children
As does any button, a menu-button must not have interactive children. Refer to
Forbidden Interactive Children in the Button entry for further details.
Relationships
A menu button and its associated menu must be programmatically linked such that
assistive technologies can inform users of the relationship.
i
For both native HTML buttons and custom menu buttons, most assistive
technologies (and Evinced’s accessibility analysis tools) find a menu button’s
associated menu when it is identified with role=menu and is adjacent to the
menu button in the DOM structure. To ensure broad support, also add the
attribute aria-controls on the menu button that references the ID of the menu
element.
Additionally, for a robust association, the menu element should set
aria-labelledby to the button’s ID. This bidirectional linking ensures both
the button and the menu correctly reference each other for assistive
technologies.
Evinced accessibility analysis checks the relationship between a menu button and
its associated menu in the test detailed in this section.
The menu control sanity test can fail when Evinced analysis cannot run to
completion due to problems with either the menu button or its associated menu.
When analyzing a menu button, Evinced tools will also analyze its
associated menu and identify accessibility issues as detailed in the
Menu entry.
A common issue for this test is trouble finding the menu button’s associated
menu. Other issues this test could flag include the following, which are
addressed in the linked sections:
- The menu button fails to open its associated menu. Refer to the
Operation tests.
- The menu button
aria-expanded attribute did not change when the button is
activated. Refer to the Aria Expanded tests.
Menu button has no associated menu
| Standard | Criteria |
|---|
| WCAG | 1.3.1 Info and Relationships |
| EN 301 549 | 9.1.3.1 Info and Relationships |
| Section 508 | N/A |
Impact: Critical
A menu with a role of menu cannot be programmatically associated with the menu
button.
Look for the following when this issue is flagged:
- The menu is not assigned the role of
menu or true. - The menu is not an immediate sibling of the menu button in the DOM hierarchy.
- The menu button does not set
aria-controls to the ID of the memory element.
Aria owns
Avoid aria-owns
A menu button relates to a menu as a sibling in the DOM hierarchy, not a child.
An aria-owns attribute on the menu button will be ignored. Use aria-controls
to identify the relationship.
Impact: Minor
Operation
All users should be able to operate a menu button.
Pointer operation
A user with a mouse or pointing device should be able to do the following:
Activate the menu
Click or tap on the menu button to open the menu. The button should remain in focus.
Interact
Click or tap an item within the menu to activate the associated command. In most
cases, the popup menu should then close with focus on the menu button.
Close
Click or tap outside of the menu button and its menu to close the menu without
activating an action.
Keyboard operation
A user operating with a keyboard should be able to operate the menu button as follows:
Focus
Use the Tab key to navigate to and place focus on the menu button.
Open/Close
With focus on the menu button, press Enter or Space to open or close the
menu. The Down Arrow key can also be used to open the menu and move focus to
the first item. The Escape key should close the menu and return focus to the
menu button.
Navigation
Once the menu is open, the Up Arrow and Down Arrow keys must move focus
between menu items. Home and End keys should move
focus to the first and last menu items, respectively.
The Left Arrow and Right Arrow keys may also be used if aria-orientation
is set to horizontal. The menu implicitly receives
aria-orientation="vertical" by default.
Selection
Press Enter or Space on a menu item to activate the command and close the menu.
Evinced accessibility analysis check the operability of a menu button in the
test detailed in this section.
Focus sequence
Like any other button, a menu button must be in the focus sequence and keyboard
accessible with the Tab key. Refer to Focus Sequence in the Button entry
for further details.
Keyboard activation
A menu button must meet all the accessibility criteria required of any button.
Refer to Keyboard Activation in the Button entry for tests and details about
activating a button using a keyboard.
Focus management
After the menu closes (for example, via Escape or item selection), focus must
be returned to the menu button.
Menu button focus management on open and close
| Standard | Criteria |
|---|
| WCAG | 2.1.1 Keyboard |
| EN 301 549 | N/A |
| Section 508 | N/A |
Impact: Serious (on open), Moderate (on close)
When the menu opens, focus must be correctly moved to the first actionable item
in the menu. When the menu closes with a user action that does not explicitly set focus, focus must be
returned to the menu button.
Disabled
Menu buttons have the same accessibility criteria as other buttons. Refer to the
accessibility guidelines detailed in Disabled Buttons in the Button entry.
Recommended reading