Slider Examples with aria-orientation and aria-valuetext

Important Note About Use of This Example

Note: This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
The ARIA-AT project plans to provide measurements of this example's assistive technology support by the end of 2020.
Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.

The following example of a hypothetical online thermostat demonstrates the slider design pattern. The desired temperature is set with the first slider, which is vertically oriented. Two horizontal sliders set fan speed and mode. The horizontal sliders illustrate how to use aria-valuetext to provide assistive technologies with meaningful names for numeric values.

Similar examples include:

Horizontal Slider Examples: Demonstrates using three horizontally aligned sliders to make a color picker.

Example

Keyboard Support

Key	Function
`Right Arrow`	Increases slider value one step.
`Up Arrow`	Increases slider value one step.
`Left Arrow`	Decreases slider value one step.
`Down Arrow`	Decreases slider value one step.
`Page Up`	Increases temperature slider value multiple steps. In this slider, jumps ten steps.
`Page Down`	Decreases temperature slider value multiple steps. In this slider, jumps ten steps.
`Home`	Sets slider to its minimum value.
`End`	Sets slider to its maximum value.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
`slider`		`div`	Identifies the element as a slider. Set on the `div` that represents as the movable thumb because it is the operable element that represents the slider value.
	`tabindex=0`	`div`	Includes the slider thumb in the page tab sequence.
	`aria-orientation`	`div`	Indicates the orientation of the slider element. Set to `vertical` for the temperature slider. Set to `horizontal` for the fan and heat/cool controls.
	`aria-valuemax=NUMBER`	`div`	Specifies a numeric value that is the maximum value the slider can have.
	`aria-valuemin=NUMBER`	`div`	Specifies a numeric value that is the minimum value the slider can have.
	`aria-valuenow=NUMBER`	`div`	A numeric value that is the current value of the slider.
	`aria-valuetext=STRING`	`div`	A string value that provides a user-friendly name for the current value of the slider. For the temperature slider, is the value of the slider appended with the text degrees. For fan and heat/cool, is the text representation of the current state, e.g., Off or Heat.
	`aria-labelledby=IDREF`	`div`	Refers to the element containing the name of the slider.

Javascript and CSS Source Code

HTML Source Code

<div class="aria-widget-vertical-slider">
  <div id="idTemp" class="label">
    Temperature
  </div>
  <div id="idTempValue" class="value">
    0
  </div>
  <div class="rail" style="height: 200px">
    <div id="idTempThumb"
         role="slider"
         tabindex="0"
         class="thumb"
         aria-valuemin="50"
         aria-valuenow="68"
         aria-valuemax="100"
         aria-labelledby="idTemp"></div>
  </div>
</div>
<div class="aria-widget-text-slider">
  <div id="idFan" class="label">
    Fan
  </div>
  <div class="rail" style="width: 160px">
    <div id="idFanThumb"
         role="slider"
         tabindex="0"
         class="thumb"
         aria-valuemin="0"
         aria-valuenow="0"
         aria-valuemax="3"
         aria-valuetext="Off"
         aria-labelledby="idFan"
         aria-orientation="horizontal"></div>
    <div class="value">
      Off
    </div>
    <div class="value">
      Low
    </div>
    <div class="value">
      High
    </div>
    <div class="value">
      Auto
    </div>
  </div>
</div>
<div class="aria-widget-text-slider">
  <div id="idHeat" class="label">
    Heat/Cool
  </div>
  <div class="rail" style="width: 120px">
    <div id="idHeatThumb"
         role="slider"
         tabindex="0"
         class="thumb"
         aria-valuemin="0"
         aria-valuenow="0"
         aria-valuemax="2"
         aria-valuetext="Off"
         aria-labelledby="idHeat"
         aria-orientation="horizontal"></div>
    <div class="value">
      Off
    </div>
    <div class="value">
      Heat
    </div>
    <div class="value">
      Cool
    </div>
  </div>
</div>