Range slider input

How to test a range slider input

Gherkin Condensed

Given that I am on a page with a range slider input

1 Keyboard for mobile & desktop

WHEN I use the tab key to move focus to a range slider I SEE focus is strongly visually indicated
THEN when I use the up/down/left/right arrow keys I SEE the value is changed one step
THEN when I use the page up/page down keys I SEE the value is changed one step

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to a range slider
- I HEAR Its purpose is clear
- I HEAR It identifies itself as a range
- I HEAR Its label is read with the input
- I HEAR It its current value
THEN when I use the up/down/left/right arrow keys I HEAR the value is changed one step
THEN when I use the page up/page down keys I HEAR the value is changed one step

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to move focus to a range slider
- I HEAR Its purpose is clear
- I HEAR It identifies itself as a range
- I HEAR Its label is read with the input
- I HEAR It its current value
THEN when I swipe up/down in iOS or use the volume buttons in Android I HEAR the value is changed one step

1 Keyboard only & screenreader

When I use	I see/hear
Tab	Focus moves visibly to the input
Arrow-keys	Increase / decrease value one step
Page-up	Increases slider value
Page-down	Decreases slider value
Home	Sets slider to its minimum value.
End	Sets slider to its maximum value.

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the input
Swipe up/down	Increase/decrease slider value one step on iOS
Volume	Increase/decrease slider value one step on Android

3 Screenreader output for all devices

Reads	I hear
Name	Its purpose is clear
Role	It identifies itself as a range
Group	Its label is read with the input
State	It its current value

Code examples

Semantic HTML

While there is a native range input, it is difficult to style reliably across browsers.

This is one of the exceedingly rare instances where a custom element makes a lot of sense.

<div class="range-group">
  <input tabindex="-1" 
          value="10" 
          aria-hidden="true"
          class="range-value" 
          id="cowbellValue">
  <div>
    <label for="cowbell">
      How much cowbell?
    </label>
    <input type="range"
      id="cowbell"
      name="cowbell"
      min="0"
      max="11"
      value="10"
      step="1">
  </div>
</div>

How much cowbell?

Custom elements

This is a rare instance where custom elements are easier to style reliably across browsers.

<div id="range-label">
  How much cowbell?
</div>
<div class="track">
  <div id="thumb"
       role="slider"
       tabindex="0"
       aria-valuemin="0"
       aria-valuenow="10"
       aria-valuemax="11"
       aria-labelledby="range-label">
  </div>
</div>

Working example: https://www.w3.org/TR/wai-aria-practices/examples/slider/slider-1.html

Developer notes

Name

Include for="input-id in each <label> label to associate it with the input
Use aria-label="Input name" as a last resort if a <label> can’t be used
Don’t hide the label on focus

Role

Identifies as a text input

State

For custom elements, use these aria attributes to describe the min, max and current value.

aria-valuemin
aria-valuemax
aria-valuenow

Group

Include for="input-id in each <label> label to associate it with the input

Focus

Focus must be visible