Rating Radio Group Example
Following is an example of a rating input that demonstrates the Radio Group Design Pattern. The rating is indicated by the number of stars selected by the user.
Similar examples include:
- Rating Slider Example: Horizontal slider that demonstrates using
aria-valuetext
to communicate current and maximum value of a rating input for a five star rating scale. - Radio Group Example Using aria-activedescendant: Radio button group that uses
aria-activedescendant
for managing keyboard focus. - Radio Group Example Using Roving tabindex: A radio button group that uses roving
tabindex
for managing keyboard focus.
Example
Accessibility Features
- To enhance perceivability when operating the radios, visual keyboard focus and hover are styled using CSS:
- The focus ring has a width of 2 pixels and at least 2 pixels of spacing between it and the star borders.
- The cursor changes to a pointer when hovering over the stars so it is easier to perceive that the rating stars are interactive.
-
To ensure the borders of the stars and the 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 focus ring border is set to match the foreground color of high contrast mode text by specifying the CSS
currentcolor
value for thestroke
property of the inline SVGpolygon
to draw the star borders andrect
element used to draw the focus ring border. To make the background of thepolygon
andrect
elements match the high contrast background color, thefill-opacity
attribute of therect
is set to zero. If specific colors were instead used to specify thestroke
andfill
properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the star and the background or even make them invisible if their color matched the high contrast mode background.
Note: The SVG element needs to have the CSSforced-color-adjust
property set toauto
for thecurrentcolor
value to be updated in high contrast mode. Some browsers do not useauto
for the default value.
Keyboard Support
Key | Function |
---|---|
Tab |
|
Space |
|
Down arrow Right arrow |
|
Up arrow Left arrow |
|
Role, Property, State, and Tabindex Attributes
Role | Attributes | Element | Usage |
---|---|---|---|
none
|
svg
|
The use of the none role on the SVG element ensures assistive technologies do not interpret the SVG element as an image or some other role.
|
|
radiogroup |
div |
|
|
aria-labelledby="ID_REFERENCE" |
div |
Refers to the element that contains the label of the radio group. | |
radio |
g |
Identifies the g element as an ARIA radio button. |
|
aria-label="name" |
g |
Defines an accessible name that identifies the number of stars associated with the radio button (e.g. "one star", two stars", ..). | |
tabindex="-1" |
g |
|
|
tabindex="0" |
g |
|
|
aria-checked="false" |
g |
|
|
aria-checked="true" |
g |
|
Javascript and CSS Source Code
- CSS: radio-rating.css
- Javascript: radio-rating.js
HTML Source Code