Usage
Sliders let users make selections from a range of values
- Sliders should present the full range of choices that are available in a single view
- The slider value should immediately take effect
Slider
How to test a slider
Given that I am on a screen with a slider
1 Keyboard
-
WHEN I use the tab key or arrow key to move focus to a slider handle I SEE focus is visually indicated
-
Then when I use the arrow keys I SEE the value increases or decreases by one
2
Android
screenreader
-
WHEN I use a screenreader AND I swipe to focus on a slider handle
- I HEAR its purpose is clear and matches visible label
- I HEAR it identifies itself as a slider
- I HEAR it expresses its value
-
Then when I swipe up with the slider handle in focus I HEAR the value increases or decreases by one
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 |
|---|---|
| Tab | Focus visibly moves to the slider handle |
| Arrow keys | Increases and decreases the value by one |
| Spacebar + arrow keys | Increase and decrease the value by one interval or one stop indicator |
| Home/end | Set the slider to the first and last values on the slider |
2 Mobile screenreader gestures
| When I use | I hear |
|---|---|
| Swipe | Focus moves to the slider, expresses its name, role, state |
| Swipe up/down | Increases and decreases the value by one |
| Doubletap + hold + drag right or left | Increases and decreases the value by one |
3 Screenreader output
| Reads | I hear |
|---|---|
| Name | Its purpose is clear and matches visible label |
| Role | It identifies itself as a slider |
| State | It expresses its value |
4 Device settings
| When I use | I see |
|---|---|
| Text resize | Text can resize up to 200% without losing information |