---
url: /components/split-button/accessibility.md
description: >-
  Split buttons combine a primary action with a secondary action in a single
  component.
---

# Split buttons

Split buttons combine a primary action with a secondary action in a single component.

[Overview](overview.md) · [Specs](specs.md) · [Guidelines](guidelines.md) · **Accessibility**

## Use cases

People should be able to do the following using assistive technology:

* Navigate to each button and interact with them
* Navigate to any element opened by the trailing button
* Understand the current selection state of the button

## Interaction & style

Each button in the split button needs a minimum target area of 48x48dp. Extra small and small split buttons are shorter than 48dp, so the target areas around them need to be at least 48dp tall.

![Diagram showing extra small and small split buttons with visible 48x48dp target areas.](/assets/717ad1e4-m0dpv69h-1.DAPY0kcx.webp)

Target areas should be at least 48x48dp <br>

1. Extra small
2. Small

## Initial focus

Focus should land on the leading button then move to the trailing button. This can depend on the operating system’s settings.

![Focus on the leading button and trailing button for both LTR and RTL languages.](/assets/bff7e529-mtsg0v46-02.B0wC2PGF.webp)

1. Left to right
2. Right to left

## Keyboard navigation

| Keys           | Actions                  |
| -------------- | ------------------------ |
| Tab            | Navigate between buttons |
| Space or enter | Activate focused button  |

## Labeling elements

The accessibility label for the leading button is the same as buttons.

![“Watch later” is both the button label text and the accessibility label.](/assets/8a14e0a1-m0dq2sfs-3.DkwclDJC.webp)

Leading buttons should have the same labels as common buttons

The trailing icon button should have an extra state or similar label indicating that the menu is expanded or collapsed.<br><br>Label the button to clearly indicate that there are more options. The label of the secondary button should indicate that it provides additional choices related to the action of the main button. For instance, if the main button says "Watch later," the secondary button should be something like "More watch options."<br><br>Label the opened menu according to the [menu accessibility guidance](../menus/accessibility.md).

![Collapsed state indicated for the trailing button.](/assets/21efb8b1-m0dq40tg-4.IS39c_3k.webp)

Trailing buttons should communicate the state of the menu and that more options are available