Developer notes
A stepper is a two-segment control used to increase or decrease an incremental value
Stepper
How to test a stepper
Given that I am on a screen with a stepper
1 Keyboard
-
WHEN I use the arrow keys or ctrl + tab to move focus to a stepper button I SEE focus is visually indicated (strongly if high contrast enabled)
-
Then when I use the spacebar to activate the stepper button I SEE the state is changed
2
VoiceOver
screenreader
-
WHEN I use a screenreader AND I swipe to focus on a stepper button
- I HEAR its purpose is clear and matches visible label
- I HEAR it identifies itself as a button
- I HEAR it describes what value it affects
- I HEAR it expresses stepper value
-
Then when I doubletap with the stepper button in focus I HEAR the state is changed
3 Device settings
-
When I use Text resize I SEE text can resize up to 200% without losing information
1 Keyboard actions
| When I use | I see/hear |
|---|---|
| Arrow keys or ctrl + tab | Focus visibly moves to the stepper buttons |
| Spacebar | Activates the button |
2 Mobile screenreader gestures
| When I use | I hear |
|---|---|
| Swipe | Focus moves to the stepper buttons, expresses its state |
| Doubletap | Activates the button |
3 Screenreader output
| Reads | I hear |
|---|---|
| Name | Its purpose is clear and matches visible label |
| Role | It identifies itself as a button |
| Group | It describes what value it affects |
| State | It expresses stepper value |
4 Device settings
| When I use | I see |
|---|---|
| Text resize | Text can resize up to 200% without losing information |