SegmentedControl
SegmentedControl is used to pick one choice from a linear set of closely related choices, and immediately apply that selection.
Page navigation navigation
A SegmentedControl is treated like a list where each list item contains a button.
Do not treat a SegmentedControl like any of the following ARIA roles:
radiogroup
requires a save button to apply changes.tablist
is used to switch between tab panels.toolbar
is a collection of function buttons.
These roles have different keyboard rules and may confuse assistive tech users if used for SegmentedControls.
Keyboard navigation
Tab
Tab
navigates through focusable elements. When entering the control:
- Focus goes to the first button if coming from before the control.
- Focus goes to the last button if coming from after the control.
Enter
or Space
Selects a focused, unselected button. Pressing again on a selected button does nothing.
Arrow Left
or Arrow Right
Arrow keys don't change focus or selection, unlike in radio groups or toolbars.
Touch targets
Ensure buttons have sufficient touch target size for touch devices. The entire touch area should respond to taps, clicks, and hovers even if it isn't directly on the control.
