WAI-ARIA: Role=Slider

Description

A user input where the user selects a value from within a given range.

A slider represents the current value and range of possible values via the size of the slider and position of the thumb. It is typically possible to add or subtract to the value by using directional keys such as arrow keys.

Authors MUST set the aria-valuemin, aria-valuemax, and aria-valuenow attributes. If missing, their implicit values follow the same rules as the HTML range input type:

• If aria-valuemin is missing or not a number, it defaults to 0 (zero).
• If aria-valuemax is missing or not a number, it defaults to 100.
• If aria-valuenow is missing or not a number, it defaults to the value half way between aria-valuemin and aria-valuemax.
• If aria-valuenow is present but less than aria-valuemin, it defaults to the value of aria-valuemin.
• If aria-valuenow is present but greater than aria-valuemax, it defaults to the value of aria-

Elements with the role slider have an implicit aria-orientation value of horizontal.

Role=Slider Example

HTML Example

Slider: A user input where the user selects a value from within a given range.

• aria-valuenow: Defines the current value for a range widget. See related aria-valuetext.
• aria-valuemin: Defines the minimum allowed value for a range widget.
• aria-valuemax: Defines the maximum allowed value for a range widget.
• aria-valuetext: Defines the human readable text alternative of aria-valuenow for a range widget.

<div 
role="slider"
aria-valuenow="1"
aria-valuemin="1"
aria-valuemax="7"
aria-valuetext="Sunday">
</div>

Characteristics

Superclass Role 

• input
• range

Required States and Properties

• aria-valuemax
• aria-valuemin
• aria-valuenow

Supported States and Properties

• aria-orientation
• aria-readonly

Inherited States and Properties

• aria-atomic
• aria-busy (state)
• aria-controls
• aria-current (state)
• aria-describedby
• aria-details
• aria-disabled (state)
• aria-dropeffect
• aria-errormessage
• aria-flowto
• aria-grabbed (state)
• aria-haspopup
• aria-hidden (state)
• aria-invalid (state)
• aria-keyshortcuts
• aria-label
• aria-labelledby
• aria-live
• aria-owns
• aria-relevant
• aria-roledescription
• aria-valuetext

Name From 

• author

Accessible Name Required

• True

Children Presentational

• True

Implicit Value for Role

• Default for aria-orientation is horizontal.
• Default for aria-valuemin is 0.
• Default for aria-valuemax is 100.
• Default for aria-valuenow is half way between aria-valuemax and aria-valuemin.

Semantic HTML

Use HTML <input type=“range”> tag.

<label for=”fader”>Volume</label>
<input type=”range” min=”0″ max=”100″ value=”50″ id=”fader” 
step=”1″ oninput=”outputUpdate(value)”>
<output for=”fader” id=”volume”>50</output>

JavaScript:
function outputUpdate(vol) {
document.querySelector(‘#volume’).value = vol;
}

Reference

• WAI-ARIA 1.2 Specification
  Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=slider.