---
url: /components/button-groups/accessibility.md
description: Button groups organize buttons and add interactions between them
---

# Button groups

Button groups organize buttons and add interactions between them

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

## Use cases

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

* Navigate to and interact with each button in the group 
* Identify when buttons are selected

## Interaction & style

Each button in a group should have a minimum 48x48dp target. <br><br>Extra small and small button groups have larger inner padding to ensure accessible targets. Avoid reducing the padding in these sizes.

![Extra small and small button groups with 48x48dp target areas annotated over top. The area is larger than the buttons.](/assets/633f5367-m0dgm57d-tap-targets.w90Z6L1d.webp)

1. Extra small button group
2. Small button group

### Initial focus

The button group container is not a focusable element. Initial focus should land on the first button in the group and then move to each button.

![Focus order lands on the first button, then the next buttons.](/assets/5d12f9ff-m0dgsbc6-focus.0-7CxFgH.webp)

Initial focus should land on the first button, not on the container

Use **Tab** to navigate to a button group, the arrow keys to navigate between each item in the group, and **Space** or **Enter** to select a focused button.

![Button group with annotations for navigation with Tab and selecting with Space or Enter.](/assets/c32ff5e9-mu4dvwu6-03.BNcdQm1s.webp)

1. **Tab**: Initial focus lands on the first button
2. Arrow keys: Navigate between items
3. **Space** or **Enter**: Selects a focused item

## Keyboard navigation

| Keys                   | Actions                       |
| :--------------------- | :---------------------------- |
| **Tab**                | Navigate between buttons      |
| Arrow keys             | Navigate inside the component |
| **Space** or **Enter** | Activate a focused button     |

## Labeling elements

The button group container doesn't need to be labeled. Label each button according to the [button](../buttons/overview.md "Buttons let people take action and make choices with one tap.") and [icon button](../icon-buttons/overview.md "Icon buttons help people take minor actions with one tap.") accessibility guidance.

![In a messaging products, an email icon is labelled “email” with the role “button”.](/assets/47bbffd8-m0dh20ef-label.Cps2y4-g.webp)

Label each button within the button group