Split button

Requirements

Users of assistive technology should be able to:

• Navigate to each button and interact with them.
• Navigate to secondary options opened by the menu trigger.
• Understand the selection state of the button.

Interactions

Each button in the split button needs a minimum target area of 24 x 24px to allow mouse users to easily select them.

Keyboard interactions

• Tab. Moves focus from the previous interactive element to the main button.
• Pressing tab again moves focus to the menu trigger.
• When the menu is activated, tab is used to navigate the secondary options.
• Enter or Space. Activates the main button, or the menu trigger which displays the secondary options.
• If secondary options are links, activate using Enter.
• If secondary options are buttons, activate using Enter or Space.

Design considerations

• The menu trigger must have a clear visual indicator to show that it has additional options.
• Use clear, descriptive labels.
• The minimum colour contrast between button background and button text should be 4.5:1.

Development considerations

• The main button should have a clear accessible name, conveyed by the inner button text.
• The menu trigger should have a clear accessible name, conveyed by an aria-label.
• If multiple buttons have the same name, use aria-describedby to specify the content each button relates to.
• The menu trigger must have an aria-expanded attribute set to "true" or "false", depending on the state of the button. This attribute can be toggled using JavaScript.
• It must have an aria-controls property set to the unique id of the dropdown it controls.
• The secondary options should be contained within an unordered list ul and each option should be contained within a list item li.