Rating Slider Example
Read This First
The code in this example is not intended for production environments.
Before using it for any purpose, read this to understand why.
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 and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
- 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.
About This Example
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:
- Rating Radio Group Example: Radio group that provides input for a five-star rating scale.
- Color Viewer Slider Example: Basic horizontal sliders that illustrate setting numeric values for a color picker.
- Vertical Temperature Slider Example: Demonstrates using
aria-orientationto specify vertical orientation and
aria-valuetextto communicate unit of measure for a temperature input.
- Media Seek Slider Example: Horizontal slider that demonstrates using
aria-valuetextto communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.
- Horizontal Multi-Thumb Slider Example: Demonstrates using sliders with two thumbs to provide inputs for numeric ranges, such as for searching in a price range.
To ensure assistive technology users correctly perceive the maximum slider value, this example uses the
aria-valuetextproperty to communicate both the current and maximum values. However, since repeating the maximum value every time the slider value changes is potentially distracting, the maximum value is included in
aria-valuetextonly when the slider is initialized and when the thumb loses keyboard focus.
- To highlight the interactive nature of the rating stars, a focus ring appears around the group of stars when the thumb 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, the color of the star borders is set to match the foreground color of high contrast mode text by specifying the CSS
currentcolorvalue for the
strokeproperty of each inline SVG
polygonelement. 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-opacityattribute of the
polygonis set to zero. If specific colors were used to specify the
fillproperties, 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-adjustproperty set to the value
currentcolorvalue to be updated in high contrast modes. Some browsers do not use
autofor the default value.
|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
||Includes the slider thumb in the page tab sequence.|
||Specifies the maximum value of the slider.|
||Specifies the minimum value of the slider.|
||Indicates the current value of the slider.|
||Refers to the element containing the name of the slider.|
||Removes the SVG elements from the accessibility tree to prevent assistive technologies from presenting them as elements separate from the slider.|
- CSS: slider-rating.css