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
Given that I am on a screen with a slider
| 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 |
| 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 |
| Reads | I hear |
|---|---|
| Name | Its purpose is clear and matches visible label |
| Role | It identifies itself as a slider |
| State | It expresses its value |
| When I use | I see |
|---|---|
| Text resize | Text can resize up to 200% without losing information |
Sliders let users make selections from a range of values