Color Viewer Slider 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 incrementing and decrementing 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.

Following is an example of a color viewer that demonstrates the slider design pattern. Change the background of the color view box by adjusting the sliders for red, green, and blue values. The HEX and RGB values of the chosen color are displayed by the color view box.

Similar examples include:

Example

Color Viewer

Red
Green
Blue

Color View Box

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 slider value multiple steps. In this slider, jumps ten steps.
Page Down Decreases 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
group div
  • Identifies the div as a group.
  • The group and its accessible name inform assistive technology users that the three sliders are related to one another and serve the purpose of choosing a color.
aria-labelledby="IDREF" div Refers to the heading element that provides the accessible name for the group.
slider div
  • Identifies the element as a slider.
  • Set on the div that represents the movable thumb because it is the operable element that controls the slider value.
tabindex="0" div Includes the slider thumb in the page tab sequence.
aria-valuemax="255" div Specifies the maximum value of the slider.
aria-valuemin="0" div Specifies the minimum value of the slider.
aria-valuenow="NUMBER" div Indicates the current value of the slider.
aria-labelledby="IDREF" div Refers to the element containing the name of the slider.
aria-hidden="true" svg Removes the SVG elements from the accessibility tree. Some assistive technologies will describe the SVG elements, unless they are explicitly hidden.

Javascript and CSS Source Code

HTML Source Code