Split Button Accessibility

Best Practices

The primary action and the menu button must be separate native buttons, so each has its own accessible label and focus stop.

A menu button’s accessible label must reflect its function. When the menu button is icon-only, provide the label via aria-label and hide the decorative icon from assistive technology.

Menu commands must have unique, descriptive labels.

Interaction Design

Refer menu button and menu patterns.

Keyboard

Both buttons must be keyboard focusable.

TAB and SHIFT-TAB keys must move keyboard focus between the primary action and the menu button.

SPACEBAR or ENTER key on the primary button must activate its action.

SPACEBAR or ENTER key on the menu button must expand the menu, and keyboard focus must go to the first command.

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

ESC key must collapse the menu and return focus to the menu button.

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

Screen Reader

Each button’s label must be announced.

The menu button’s state must be announced (e.g. expanded or collapsed).

Pointer

Clicking the primary button runs its action. Clicking the menu button expands or collapses the menu. Clicking any command should collapse the menu.

ARIA Reference

Attribute	Description
role=menu	Informs assistive technology that this is a menu containing menuitems.
role=menuitem	Informs assistive technology that this menu command has button behaviour.
aria-haspopup=true	Informs assistive technology that the menu button controls a popupmenu .
aria-controls	Informs assistive technology of which menu the menu button controls.
aria-expanded	Informs assistive technology whether the popup menu is expanded or not. And yes, this state goes on the menu button, not the menu.
aria-label	Creates a label for the menu button. Most commonly used when the menu button is icon-only.
aria-hidden=true	Hides the decorative menu button icon.