Usage
A slider is a horizontal track with a control, called a thumb, that people can adjust between a minimum and maximum value.
Slider
How to test a slider
Given that I am on a screen with a slider
1 Keyboard
-
WHEN I use focus moves visibly to the slider I SEE focus is visually indicated (strongly if high contrast enabled)
-
Then when I use the left/right arrow keys to increase / decrease value one step I SEE the state is changed
2
VoiceOver
screenreader
-
WHEN I use a screenreader AND I swipe to moves focus to the slider
- I HEAR its name describes the purpose of the control and matches the visible label
- I HEAR it identifies itself as "adjustable"
- I HEAR its visible label is read with the input
- I HEAR it expresses its current value
-
Then when I swipe up/down to increase/decrease slider value one step 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 moves visibly to the slider |
| Left/right arrow-keys | Increase/decrease slider value one step |
2 Mobile screenreader gestures
| When I use | I hear |
|---|---|
| Swipe | Focus moves to the input |
| Swipe up/down | Value increase / decrease one step |
3 Screenreader output
| Reads | I hear |
|---|---|
| Name | Its name describes the purpose of the control and matches the visible label |
| Role | It identifies itself as "adjustable" |
| Group | Its visible label is read with the input |
| State | It expresses its current value |
4 Device settings
| When I use | I see |
|---|---|
| Text resize | Text can resize up to 200% without losing information |