Sliders simulated using ARIA

Summary

Principle

Sliders are form elements that allow the user to select a unique value, by moving a cursor on a scale.

Sliders that are “simulated using ARIA” 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.0 Authoring Practices 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

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

End

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

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

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 should 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

Required fields are marked *.

Back to top