Rating 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 rating input that demonstrates the slider design pattern. Rating level is indicated by the number of full and half stars selected by the user.

Similar examples include:

Slider Examples with aria-orientation and aria-valuetext: Three thermostat control sliders that demonstrate using aria-orientation and aria-valuetext.

Example

Rating

Accessibility Features

When the rating slider is initialized and when the slider thumb loses keyboard focus the total number of stars is appended to aria-valuetext to orient the user to the maximum value of the slider. When the user changes the value, the maximum number of stars is not included, since hearing the maximum value for every change is considered distracting.
To highlight the interactive nature of the rating stars a focus ring appears around the group of stars when it has focus.
To ensure the borders of the stars and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content. For example, support for using the high contrast foreground color for the star borders is achieved by using the CSS currentColor value for the stroke property of each inline SVG polygon element. To enable the high contrast background color to be the used as the contrasting color when a star is not fully or partially filled, the fill-opacity attribute of the poloygon is set to zero. If specific colors were used to specify the stroke and fill properties, the color of these elements would remain the same in high contrast mode, which could lead to insufficient contrast between them and their background or even make them invisible if their color were to match the high contrast mode background.
Note: The SVG element needs to have the CSS forced-color-adjust property set to the value auto for the currentColor value to be updated in high contrast modes, some browsers do not use auto for the default value.

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 selected.
`End`	Sets slider to its maximum value, all starts selected.

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. For the rating slider the number of stars and half stars selected.
	`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

CSS: slider-rating.css
Javascript: slider-rating.js