- Core HTML base.
- ARIA roles, states and properties.
- Keyboard interaction.
- Expected behavior.
Sliders are form elements that allow the user to select a unique value, by moving a graduated cursor on a scale.
Sliders that are “customized” are not built using the standard HTML code as found in the specification
<input type="range" />.
The following code shows how to reproduce the behavior of HTML sliders, if the native sliders cannot be used.
This code is based on the “Slider” design pattern found in the WAI-ARIA 1.1 Authoring Practices of the W3C.
Core HTML base
ARIA roles, states and properties
role="slider"must be placed on the slider.
aria-valueminattribute must be added to the cursor. Its value must be set to the minimum value allowed by the slider.
aria-valuemaxattribute must be added to the cursor. Its value must be set to the maximum value allowed by the slider.
aria-valuenowattribute must be added to the cursor. Its value must be set dynamically to the current value of the cursor.
- The cursor must be programmatically associated with its label text using the
- The label of the slider must have an
idset to a unique value.
- The cursor must have an
aria-labelledbyattribute set to the value of the
idof the slider.
- The label of the slider must have an
aria-hidden="true"must be applied to the image of the cursor.
The keyboard interaction is the same as for standard HTML sliders. The only exception is that the focus is set directly on the cursor and not on the whole slider.
When the user tabs into the slider, the focus is placed on the cursor, hitting the Tab key again causes the focus to leave the slider.
Shift + Tab
This key combination provides the same behavior as the Tab key, but in the reverse order.
Up arrow and Right arrow
When the keyboard focus is on the cursor, either of these keys moves the slider and increases the value by one step.
Down arrow and Left arrow
When the keyboard focus is on the cursor, either of these keys moves the slider and decreases the value by one step.
When the keyboard focus is on the cursor, this key moves the cursor to its minimum.
When the keyboard focus is on the cursor, this key moves the cursor to its maximum.
When the keyboard focus is on the cursor, this key moves the cursor and increases the value by a predefined number of steps.
When the keyboard focus is on the cursor, this key moves the cursor and decreases the value by a predefined number of steps.
- When the keyboard focus is on the cursor, the focus will stay on the cursor until the Tab key is pressed.
- When the keyboard focus is on the cursor, the slider value can be modified using the following keys: Up arrow, Down arrow, Home, End, Page up and Page down.
- The value of the
aria-valuenowattribute must be modified dynamically to update the slider and should be identical to the value of the slider.
- The value of the slider cannot be higher than the
- The value of the slider cannot be lower than the
The choice of the number of steps to “jump” when pressing the Page up and Page down keys is open.
On the other hand, it is important to note that digital information conveyed by the
aria-valuenow attribute is not always clear. This may be the case, for example, when a slider is used to select one of the seven days of the week:
In these situations, the optional
aria-valuetext element must be used in parallel to the value, in order to translate the current value into something more understandable:
If it is used, the value of the
aria-valuetext attribute should be updated dynamically as the cursor position changes.
Note that the
<img /> tags found in the code above can be also replaced with scalable vector graphics
<svg>, or icon fonts.
The “Customized sliders” components are shown here because their level of accessibility is considered good or very good.
However, before using them in your project, it is important to check for compliancy with the specifications presented above. Certain components may require some adjustments.