Developer What component has
Keyboard support
| Key | Function |
|---|---|
Tab | Moves focus to the slider. |
Right Arrow , Up Arrow | Increases slider value one step. |
Left Arrow , Down Arrow | Decreases slider value one step. |
Home | Set the slider to the first allowed value in its range. |
End | Set the slider to the last allowed value in its range. |
Roles and attributes
The list below describes roles and attributes that component already has.
| Role | Attribute | Element | Usage |
|---|---|---|---|
slider | div | Identifies the element as a slider. Set on the div that represents as the movable thumb because it is the operable element that represents the slider value. | |
tabIndex="0" | div | Includes the slider thumb in the page tab sequence. | |
aria-valuemax="255" | div | Specifies the maximum value of the slider. | |
aria-valuemin="0" | div | Specifies the minimum value of the slider. | |
aria-valuenow="NUMBER" | div | Indicates the current value of the slider. | |
aria-valuetext="string" | div | Defines the human readable text alternative of aria-valuenow for a range widget. | |
aria-labelledby="IDREF" | div | Refers to the element containing the name of the slider. | |
aria-orientation | div | Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. |
Resources
- W3 slider documentation has information about the slider accessible behavior and its different versions.
- Find live examples of accessible inputs with different types in DigitalA11y project.
Other recommendations
See more accessibility recommendations in the common Accessibility guide.
Automated screen reader testing
Intergalactic v15.29.0, React v18.2.0, Playwright v1.25.1, Guidepup v0.13.1, MacOS Monterey 12.
Running screen reader against this file.
1. Screen reader goes into the active element.
2. Screen reader says "Medium slider".
3. Screen reader goes into the active element.
4. Screen reader says "In slider".
5. Screen reader presses the "Control+Option+ArrowLeft" button.
6. Screen reader says "Small".
7. Screen reader presses the "Control+Option+ArrowRight" button.
8. Screen reader says "Medium".
9. Screen reader presses the "Control+Option+ArrowRight" button.
10. Screen reader says "Big".
11. Screen reader goes out of active element.
12. Screen reader says "Out of slider".1. Screen reader goes into the active element.
2. Screen reader says "Medium slider".
3. Screen reader goes into the active element.
4. Screen reader says "In slider".
5. Screen reader presses the "Control+Option+ArrowLeft" button.
6. Screen reader says "Small".
7. Screen reader presses the "Control+Option+ArrowRight" button.
8. Screen reader says "Medium".
9. Screen reader presses the "Control+Option+ArrowRight" button.
10. Screen reader says "Big".
11. Screen reader goes out of active element.
12. Screen reader says "Out of slider".