What component has

Keyboard support

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 following list describes roles and attributes that component already has.

Roles and attributes

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".