Usage
A segmented control is a linear set of two or more segments, each of which functions as a button.
Segmented control
How to test a segmented control
Given that I am on a screen with a segmented control
1 Keyboard
-
WHEN I use the arrow keys or ctrl + tab to move focus to a segmented control I SEE focus is visually indicated (strongly if high contrast enabled)
-
Then when I use the arrow keys I SEE the focus moves through the buttons
-
Then when I use the spacebar I SEE the selection changes
2
VoiceOver
screenreader
-
WHEN I use a screenreader AND I swipe to focus on a segmented control
- I HEAR purpose is clear and matches visible label
- I HEAR identifies as a button
- I HEAR visible label (if any) is grouped or associated with the button in a single swipe
- I HEAR expresses its state (selected/disabled/dimmed)
-
Then when I doubletap with a button in focus I HEAR the selection is changed
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 |
|---|---|
| Ctrl + tab | Focus visibly moves to the button |
| Arrow keys | Navigate through group |
| Spacebar | Activates the button |
2 Mobile screenreader gestures
| When I use | I hear |
|---|---|
| Swipe | Focus moves to the element, expresses its state, if applicable |
| Doubletap | Activates the button |
3 Screenreader output
| Reads | I hear |
|---|---|
| Name | Purpose is clear and matches visible label |
| Role | Identifies as a button |
| Group | Visible label (if any) is grouped or associated with the button in a single swipe |
| State | Expresses its state (selected/disabled/dimmed) |
4 Device settings
| When I use | I see |
|---|---|
| Text resize | This element is exempt from text resizing requirements |