Tab

Moves focus onto or off of the button group. Focus is placed on the primary button of the group.

Shift + Tab

Moves focus to the previous component.

Space or Enter

Executes the selected action within the button group. Focus remains on the active button to preserve context across the group. If the action opens or closes a related container, focus moves into the resulting context or returns to the triggering button

Arrow keys

Moves focus through the group of buttons.

Pointer

Use the pointer cursor for all interactive components in every state.

Non-text content

A

Non‑text elements—such as icons used in buttons—must provide a text alternative that communicates the button’s purpose. All buttons, especially icon‑only buttons, need an accessible name (for example, via a title, aria‑label, or associated text) so screen readers can announce their function.

Info and relationships, Identify purpose

1.3.1, 1.3.6

A, AAA

Buttons should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role of buttons should be utilized.

Orientation

AA

Button groups are available in both vertical and horizontal orientations.

Use of color

A

Color is never used as the sole way to convey meaning in buttons. While negative buttons do use red to reinforce their purpose, every button also includes a clear text label that communicates the action it performs.

Text contrast

AA

Large text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement.

Non-text contrast

AA

The visual presentation of icons and various states have a contrast ratio of at least 3:1.

Text spacing

AA

Line height of text is at least 1.5x the font size when text is wrapped in buttons.

Keyboard

2.1.1, 2.1.3

A, AAA

All functionality of the component is operable through a keyboard without specific timing for keystrokes.

Keyboard traps

A

Focus can be moved away from the component using only a keyboard.

Seizures and physical reactions

2.3.1, 2.3.2, 2.3.3

A, AAA, AAA

There is no flashing content or unnecessary motion or animation in this component.

Focus order

A

Navigation sequences receive focus in an order that preserves meaning and operability.

Focus visible

AA

Keyboard states use an indicator that is visible with at least 3:1 contrast.