Rating 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.

Following is an example of a rating input that demonstrates the Slider Pattern. This rating widget employs a slider because the slider pattern supports step values of any size. This particular input enables half-star steps. A typical five-star rating widget that allows only five possible values could instead be implemented as a radio group.

Similar examples include:

Example

Rating

Accessibility Features

Keyboard Support

Key Function
Right Arrow Increases slider one half star.
Up Arrow Increases slider one half star.
Left Arrow Decreases slider one half star.
Down Arrow Decreases slider one half star.
Page Up Increases slider value multiple steps. In this slider, jumps one star.
Page Down Decreases slider value multiple steps. In this slider, jumps one star.
Home Sets slider to its minimum value, no stars.
End Sets slider to its maximum value, five stars.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
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="5" 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-valuetext="STRING" div
  • A string value that provides a user-friendly name for the current value of the slider -- the number of stars and half stars.
  • When initialized, and when the slider loses focus, the string also includes the maximum value of five stars, e.g., 3 of 5 stars.
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 to prevent assistive technologies from presenting them as elements separate from the slider.

JavaScript and CSS Source Code

HTML Source Code