Customized sliders

Summary

Principle

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 ARIA Authoring Practices Guide (APG) of the W3C.

Core HTML base

<p id="label">Slider label</p>
<button role="slider" aria-valumin="0" aria-valuemax="10" aria-valuenow="8" aria-labelledby="label">
  <img src="cursor.png" aria-hidden="true" alt="" />
</button>
[…]

ARIA roles, states and properties

  • role="slider" must be placed on the slider.
  • The aria-valuemin attribute must be added to the cursor. Its value must be set to the minimum value allowed by the slider.
  • The aria-valuemax attribute must be added to the cursor. Its value must be set to the maximum value allowed by the slider.
  • The aria-valuenow attribute 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 aria-labelledby attribute:
    • The label of the slider must have an id set to a unique value.
    • The cursor must have an aria-labelledby attribute set to the value of the id of the slider.
  • aria-hidden="true" must be applied to the image of the cursor.

Keyboard interaction

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.

Tab

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.

Home

When the keyboard focus is on the cursor, this key moves the cursor to its minimum.

End

When the keyboard focus is on the cursor, this key moves the cursor to its maximum.

Page up

When the keyboard focus is on the cursor, this key moves the cursor and increases the value by a predefined number of steps.

Page down

When the keyboard focus is on the cursor, this key moves the cursor and decreases the value by a predefined number of steps.

Expected behavior

  • 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-valuenow attribute 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 aria-valuemax value.
  • The value of the slider cannot be lower than the aria-valuemin value.

Note

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:

<p id="event-day">Day of the week</p>
<button role="slider" aria-valumin="0" aria-valuemax="6" aria-valuenow="3" aria-labelledby="event-day">
  <img src="cursor.png" aria-hidden="true" alt="" />
</button>
[…]

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:

<p id="event-day">Day of the week</p>
<button role="slider" aria-valumin="0" aria-valuemax="6" aria-valuenow="3" aria-valuetext="Thursday" aria-labelledby="event-day">
  <img src="cursor.png" aria-hidden="true" alt="" />
</button>
[…]

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.

Comments

Add a comment

All fields are mandatory.

Back to top