Vertical Temperature Slider Example

About This Example

Warning!

Some users of touch-based assistive technologies may experience difficulty utilizing widgets that implement this slider pattern because the gestures their assistive technology provides for operating sliders may not yet generate the necessary output. To change the slider value, touch-based assistive technologies need to respond to user gestures for increasing and decreasing the value by synthesizing key events. This is a new convention that may not be fully implemented by some assistive technologies. Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems.

The following example is a vertically oriented temperature control that implements the Slider Pattern. The slider illustrates use of aria-orientation to specify vertical orientation and use of aria-valuetext to convey unit of measure for numeric values to assistive technology users by appending degrees Celsius to the current value.

Similar examples include:

Example

Temperature
25°C 25°C

Accessibility Features

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 twenty steps (e.g. 2°C).
Page Down Decreases temperature slider value multiple steps. In this slider, jumps twenty steps (e.g. 2°C).
Home Sets slider to its minimum value.
End Sets slider to its maximum value.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
none svg ensures assistive technologies do not present the SVG element as an image or any other type of meaningful element.
slider g
  • Identifies the element as a slider.
  • Set on the g element that represents the movable thumb because it is the operable element that receives focus and conveys the value.
tabindex="0" g Includes the slider thumb in the page tab sequence.
aria-orientation g Indicates the slider is vertically oriented.
aria-valuemax="NUMBER" g Specifies the numeric value that is the maximum allowed value of the slider.
aria-valuemin="NUMBER" g Specifies the numeric value that is the minimum allowed value of the slider.
aria-valuenow="NUMBER" g A numeric value that is the current value of the slider.
aria-valuetext="STRING" g Provides a more user-friendly name for the current value of the slider by combining the current value with the string degrees Celsius.
aria-labelledby="IDREF" g Refers to the element containing the name (e.g. label) of the slider.
aria-hidden="true" rect Removes the SVG rect element from the accessibility tree to prevent screen readers from presenting it as a meaningful image.

JavaScript and CSS Source Code

HTML Source Code