Rating Radio Group Example

About This Example

Following is an example of a rating input that demonstrates the Radio Group Pattern. The rating is indicated by the number of stars selected by the user.

Similar examples include:

Example

Rating

Accessibility Features

Keyboard Support

Key Function
Tab
  • Moves focus to the checked radio button in the radiogroup.
  • If a radio button is not checked, focus moves to the first radio button in the group.
Space
  • If the radio button with focus is not checked, changes the state to checked.
  • Otherwise, does nothing.
  • Note: The state where a radio is not checked only occurs on page load.
Down arrow
Right arrow
  • Moves focus to and checks the next radio button in the group.
  • If focus is on the last radio button, moves focus to the first radio button.
  • The state of the previously checked radio button is changed to unchecked.
Up arrow
Left arrow
  • Moves focus to and checks the previous radio button in the group.
  • If focus is on the first radio button, moves focus to and checks the last radio button.
  • The state of the previously checked radio button is changed to unchecked.

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
  • Identifies the div element as a container for a group of radio buttons.
  • Is not focusable because focus is managed using a roving tabindex strategy as described below.
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
  • Makes the element focusable but not part of the page Tab sequence.
  • Applied to all radio buttons contained in the radio group except for one that is included in the page Tab sequence.
  • This approach to managing focus is described in the practice for Managing Focus Within Components Using a Roving tabindex.
tabindex="0" g
  • Makes the radio button focusable and includes it in the page Tab sequence.
  • Set on only one radio in the radio group.
  • On page load, is set on the first radio button in the radio group.
  • Moves with focus inside the radio group so the most recently focused radio button is included in the page Tab sequence.
  • This approach to managing focus is described in the practice for Managing Focus Within Components Using a Roving tabindex.
aria-checked="false" g
  • Identifies radio buttons which are not checked.
  • CSS attribute selectors (e.g. [aria-checked="false"]) are used to synchronize the visual states with the value of the aria-checked attribute.
  • The CSS ::before pseudo-element is used to indicate visual state of unchecked radio buttons to support high contrast settings in operating systems and browsers.
aria-checked="true" g
  • Identifies the radio button which is checked.
  • CSS attribute selectors (e.g. [aria-checked="true"]) are used to synchronize the visual states with the value of the aria-checked attribute.
  • The CSS ::before pseudo-element is used to indicate visual state of checked radio buttons to support high contrast settings in operating systems and browsers.

JavaScript and CSS Source Code

HTML Source Code