Accessible Styled Form Controls

Styled Radio Button Star Rating Component

Last updated:

Pattern to restyle a radio button group into a star rating component.

Pattern Demo

Rate my rating system:
Disabled (via fieldset) my rating system:
Rate my rating system (some inputs disabled):

Pattern Details

Pattern Markup
<fieldset class="r-radios">
    Rate my rating system:

  <input type="radio" name="r_input" id="r_input_0" checked>
  <label for="r_input_0" class="r-radio r-radio--none">
    <svg aria-hidden="true" focsable="false">
      <use xlink:href="#no_rating"/>
    <span>No rating</span>

  <input type="radio" name="r_input" id="r_input_1">
  <label for="r_input_1" class="r-radio">
    <svg aria-hidden="true" focsable="false">
      <use xlink:href="#star"/>
    <span>1 Star</span>

  <!-- add more stars here! -->

As the rating system is built by a series of radio buttons, these form controls should live within a fieldset with a legend to appropriately caption the radio button group's purpose. If it makes sense for these groupings of radio buttons to be called out in the document outline, then the legend can have an appropriately ranked heading element as its child element, containing the text of the legend.

The ratings begin with a "No rating" radio button that has is set to the checked attribute, by default. Radio buttons do not have a native way to revert to a completely unchecked state, without usage of a form reset button or a user performing a hard refresh with their browser. If a user erroneously "rates" an item, there should be a way for them to negate that rating without having to reset a form or refresh the page, hence the "No rating" option.

The actual radio button input elements are visually hidden, but maintain the ability to be focused and found by keyboard and screen reader users. The label for each radio button contains an inline SVG of a star, so the SVG can be manipulated by CSS. A text string is also contained within the label and is visible on :hover and :focus of the SVG and input, respectively.

Note that the SVG elements have the following attributes:

  • aria-hidden="true" to hide the SVG from screen readers.
  • focusable="false" to ensure that Internet Explorer does not allow keyboard focus to attempt to traverse the SVG.

Affects on Screen Reader Announcements?

Being these are just styled radio button labels, the announcement of this radio group hasn't been altered in a significant way. Screen readers like JAWS and NVDA may automatically go into forms mode, or require a user to hit Enter or Space to focus into the radio button. Then arrow keys can be used to select the different radio buttons, as expected.

VoiceOver on macOS may begin to focus the radio button labels when using arrow keys to change the selected radio button. This issue does not exist in VoiceOver + Chrome and is not necessarily unique to this particular styling of radio buttons.

Continue Reading

For another take on star rating radio groups, with a bunch of style variants, check out the Starability project by Lunar Logic.