Usage
Segmented buttons help people select options, switch views, or sort elements.
- Two types: single-select and multi-select
- Use for simple choices between two to five items (for more items or complex choices, use chips)
Segmented button
How to test a segmented button
Given that I am on a screen with a segmented button
1 Keyboard
-
WHEN I use the tab key to move focus to a segmented button I SEE focus is visually indicated
-
Then when I use spacebar or enter to activate the button I SEE the state changes
2
Android
screenreader
-
WHEN I use a screenreader AND I swipe to focus on a button
- I HEAR its purpose is clear and matches visible label
- I HEAR if single select it identifies as radio button
- I HEAR if multiple select it identifies as checkbox
- I HEAR its visible label (if any) is grouped or associated with the button in a single swipe
- I HEAR it expresses its state (selected/disabled)
-
Then when I doubletap with the button in focus I HEAR the state changes
3 Device settings
-
When I use Text resize I SEE this element is exempt from text resizing requirements
1 Keyboard actions
| When I use | I see/hear |
|---|---|
| Tab | Focus visibly moves to the button |
| Spacebar or enter | Selects the button |
2 Mobile screenreader gestures
| When I use | I hear |
|---|---|
| Swipe | Focus moves to the buttons, expresses its state |
| Doubletap | Selects the button |
3 Screenreader output
| Reads | I hear |
|---|---|
| Name | Its purpose is clear and matches visible label |
| Role single select | If single select it identifies as radio button |
| Role multiple select | If multiple select it identifies as checkbox |
| Group | Its visible label (if any) is grouped or associated with the button in a single swipe |
| State | It expresses its state (selected/disabled) |
4 Device settings
| When I use | I see |
|---|---|
| Text resize | This element is exempt from text resizing requirements |