Menu Button Accessibility

Best Practices

See menu best practices .

Selecting a menu item command should update the page without a full page reload (i.e. acting similar to buttons, checkboxes or radios). If a full page load is required instead (i.e. acting like links), please refer to the fake menu button .

Care is needed when labelling a menu button!

If attempting to mimic the behaviour of an HTML select inside of a form, please use the Listbox Button .

A menu button’s accessible label must at all times reflect its function. By default, this label is provided by the button ’ s inner text (i.e. buttons are not intended to work with <label> elements).

If a menu button’s inner text is intended to also convey some state (i.e. single select) then please consider the following options.

Internally Labelled Menu Button

The button’s inner text can be written as a key/value pair, where key denotes purpose and value represents the current selection.

<button>Colour: blue<button>

Additionally Labelled Menu Button

We can use aria-labelledby to stitch together an external text element with the internal value.

<span id="el1">Colour</span><button aria-labelledby="el1 el2"><span id="el2">blue</span></button>

Interaction Design

This section provides interaction design for keyboard, screen reader & pointing devices.

Please also see related menu pattern for best practices of nested menu.

Keyboard

The button must be keyboard focusable.

SPACEBAR or ENTER key on button must expand the menu.

When menu is expanded, keyboard focus must go to the first item in the menu.

UP-ARROW and DOWN-ARROW keys must navigate keyboard focus through commands via a roving tabindex.

If focus is on a command, ENTER or SPACEBAR keys must activate that command.

ESC key must collapse menu and return focus to button.

Activating any menu item should collapse menu (typically after a very short delay/transition).

TAB key must move keyboard focus off widget, and onto next interactive element in the page.

When widget loses focus, menu should collapse.

Screen Reader

Button label must be announced (e.g. ‘Options’).

Button state must be announced (e.g. expanded or collapsed).

Pointer

Clicking any menu item should collapse menu (typically after a very short delay/transition).

ARIA Reference

This section gives an overview of our use of ARIA, within the specific context of the menu button pattern.