Slider

A slider is a form of input that allows users to select a value from a range of values. Typically, a slider should be implemented using a semantic HTML range input element but it is also possible to implement a slider using the ARIA slider role.

Role

A slider widget must have a role of slider. The best way to achieve this is to use a semantic HTML range input element. If you are unable to use a range input element, you must add the role="slider" attribute to the element that represents the slider.

1<!-- better to use the range input element -->
2<input type="range" ... />
3
4<!-- if you can't use the range input element -->
5<div role="slider" ... ></div>

Accessibility label

A slider must have an accessibility label. The accessibility label is the text that is read by screen readers to describe the element. There are many ways to provide an accessibility label for a slider. If an HTML range input is used, the accessibility label can be provided by the slider label. The accessibility label should convey the functionality of the slider but not the current value of the slider.

1<!-- The input range's label constitutes the slider's accessibility label -->
2<label>
3    Volume
4    <input type="range" ... />
5</label>
6
7<!-- The `label[for]` attribute may also be used instead of wrapping the input in a label tag -->
8<label for="volume">
9    Volume
10</label>
11<input id="volume" type="range" ... />

If the slider is implemented using a non-semantic element, the accessibility label can be provided using the aria-label or aria-labelledby attribute.

1<!-- Slider gets its accessibility label from the visible label via the aria-labelledby attribute  -->
2<span id="volume-label">Volume</span>
3<div
4    role="slider"
5    aria-labelledby="volume-label"
6    ...
7></div>
8
9<!-- Slider gets its accessibility label from the aria-label attribute  -->
10<div
11    role="slider"
12    aria-label="Volume"
13    ...
14></div>

Focus sequence

A slider must be focusable unless it is disabled. This is important for keyboard users who need to be able to navigate to the slider.

Semantic HTML inputs are always focusable when not disabled. Sliders implemented using non-semantic elements can be made focusable by adding the tabindex="0" attribute to the slider element.

Disabled sliders

A slider implemented using a range input can be disabled by adding the disabled attribute. In that case, the slider will not be focusable.

Sliders implemented using non-semantic elements can be disabled by adding the aria-disabled="true" attribute to the slider element. In that case the developer may choose to make the slider focusable or not. The aria-disabled attribute should not be used on a semantic HTML range input element.

1<!-- Disabled non-semantic HTML slider -->
2<div
3    role="slider"
4    aria-disabled="true"
5    ...
6></div>
7
8<!-- Disabled non-semantic HTML slider that is focusable -->
9<div
10    role="slider"
11    tabindex="0"
12    aria-disabled="true"
13    ...
14></div>
15
16<!-- sliders implemted using semantic elements should not use aria-disabled -->
17✓ <input type="range" ... disabled />
18✗ <input type="range" ... aria-disabled="true" />

Values

Sliders must convey their current value as well as the minimum and maximum values of the slider's range to assistive technologies. This is important for screen reader users who need to know the current value of the slider and the range of values that the slider supports.

Native HTML range inputs use the min, max, and value attributes to convey this information.

1<input type="range" min="0" max="100" value="50" ... />

Sliders implemented using non-semantic elements must use the aria-valuemin, aria-valuemax, and aria-valuenow attributes to convey this information.

1<div
2    role="slider"
3    aria-valuemin="0"
4    aria-valuemax="100"
5    aria-valuenow="50"
6    ...
7></div>

aria-valuetext

The aria-valuetext attribute may also be used to provide a human-readable version of the current value. The aria-valuetext attribute should be used when the current value is not human-readable and therefore should not be the same as the aria-valuenow attribute. The aria-valuetext attribute may be used on both native HTML range inputs and sliders implemented using non-semantic elements.

1<input type="range" min="1" max="12" value="2" aria-valuetext="February" ... />

Keyboard navigation

Sliders must support keyboard navigation. This is important for keyboard users who need to be able to interact with the slider without using a pointing device.

The following keyboard interactions must be supported:

• The ArrowLeft and ArrowDown (optional unless slider is vertically oriented aria-orientation="vertical") keys must decrease the slider's value by a step.
• The ArrowRight and ArrowUp (optional unless slider is vertically oriented aria-orientation="vertical") keys must increase the slider's value by a step.
• The Home key must set the slider's value to the minimum allowed value.
• The End key must set the slider's value to the maximum allowed value.
• The PageUp and PageDown keys may optionally increase or decrease the slider's value by an amount larger than the step size.

It is acceptable, if the use case warrants it, to reverse the direction of the value change e.g. having the ArrowLeft key increase the value and the ArrowRight key decrease the value.

Step size

The step size is the amount that the slider's value changes when the user presses the ArrowLeft, ArrowRight, ArrowUp, or ArrowDown keys.

On a native HTML range input, the step size is determined by the step attribute.

Both native HTML range inputs and sliders implemented using non-semantic elements must implement a consistent step size. The step size must be the same for all arrow key presses.

Examples

Browsers will automatically implement the keyboard interactions for native HTML range inputs.

1<input type="range" min="0" max="100" value="50" step="5" ... />

Sliders implemented using non-semantic elements must implement the keyboard interactions using javascript.

1<div
2    role="slider"
3    aria-valuemin="0"
4    aria-valuemax="100"
5    aria-valuenow="50"
6    aria-label="Volume"
7    data-step="5"
8    tabindex="0"
9    ...
10></div>

1function onKeyDown(event) {
2    const slider = event.target;
3    const step = parseInt(slider.dataset.step, 10);
4    const value = parseInt(slider.getAttribute('aria-valuenow'), 0);
5    const min = parseInt(slider.getAttribute('aria-valuemin'), 0);
6    const max = parseInt(slider.getAttribute('aria-valuemax'), 100);
7
8    switch (event.key) {
9        case 'ArrowLeft':
10        case 'ArrowDown':
11            slider.setAttribute('aria-valuenow', Math.max(value - step, min));
12            break;
13        case 'ArrowRight':
14        case 'ArrowUp':
15            slider.setAttribute('aria-valuenow', Math.min(value + step, max));
16            break;
17        case 'Home':
18            slider.setAttribute('aria-valuenow', min);
19            break;
20        case 'End':
21            slider.setAttribute('aria-valuenow', max);
22            break;
23        case 'PageUp':
24            slider.setAttribute('aria-valuenow', Math.min(value + step * 10, max));
25            break;
26        case 'PageDown':
27            slider.setAttribute('aria-valuenow', Math.max(value - step * 10, min));
28            break;
29        default:
30            return;
31    }
32
33    event.preventDefault();
34}
35document.querySelectorAll('[role="slider"]').forEach(slider => {
36    slider.addEventListener('keydown', onKeyDown);
37});

ARIA owns

If the slider should contain elements that cannot be implemented as descendants of the slider, the aria-owns attribute can be used to indicate that the slider owns the elements. However, since the aria-owns attribute is not supported by some assistive technologies, it is best practice to avoid it. If it must be used, the aria-owns attribute should be set on the slider and should point to the IDs of the owned elements.

Summary of Tests

Recommended Reading

• ARIA Authoring Practices Guide (APG) Slider
• MDN Web Docs: HTML range input element
• MDN Web Docs: Slider role
• OpenUI Slider Research