Accessibility (a11y)
This RangeSlider is built with accessibility in mind. I’ve done my best to follow the guidelines set out by the W3C and MDN. and have done some testing myself with VoiceOver on macOS and screen readers.
I am not a person with difficulties in accessibility, however, so I can’t really say with certainty how well this component works for people with impairments. But I have followed guidelines to the best I know. If you are an accessible user, and would like to feedback, please do!
I am aiming for this to be THE accessible RangeSlider component for the web, so if you have any feedback, please open an issue or drop by the discussion on GitHub Discussions and let me know! If you are able to contribute in any way to make this the best it can be for people with impairments, I thank you so much!
Keyboard support
The RangeSlider supports the following keyboard shortcuts.
(use the slider above to test them out)
- Tab ⭲ Move focus to next handle
- Left ← Decrease value by
1 - Right → Increase value by
1 - CtrlLeft ← Decrease value by 1%
- CtrlRight → Increase value by 1%
- ShiftLeft ← Decrease value by 10%
- ShiftRight → Increase value by 10%
- Page Up Increase value by 10%
- Page Dn Decrease value by 10%
- Home Set value to
min - End Set value to
max
Aria Labels
It’s possible to provide a list of labels for the handles to be read out by screen readers. This is done by passing an array of strings to the aria-labels prop.
Read more about aria-label here , and specifically for the slider role here.
Generally speaking, set the ariaLabels prop to a label which describes the purpose of the handle. For example, if the handle is controlling the volume of a video, you might set the aria-label to “Volume”.
eg; ariaLabels={['Volume']}