Star rating input

How to test a star rating input

Gherkin Condensed WCAG

Given that I am on a page with a star rating input

1 Keyboard for mobile & desktop

WHEN I use the tab key to move focus to a radio group I SEE focus is strongly visually indicated on the first unselected option or the selected option
Then when I use the spacebar to activate the radio button I SEE the radio button with focus change state to selected.
Then when I use the arrow keys to focus radio button I SEE the state is changed

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to a radio group
- I HEAR Its label and purpose is clear
- I HEAR It identifies itself as a radio option
- I HEAR Each option has an associated label and the radio group name
- I HEAR It expresses its state (selected, checked, disabled)
Then when I use the spacebar to activate the radio button I HEAR the radio button with focus change state to selected.
Then when I use the arrow keys to focus radio button I HEAR the state is changed

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to focus on a radio button
- I HEAR Its label and purpose is clear
- I HEAR It identifies itself as a radio option
- I HEAR Each option has an associated label and the radio group name
- I HEAR It expresses its state (selected, checked, disabled)
Then when I doubletap with the radio in focus I HEAR the state is changed

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Focus visibly moves to the checked radio button in the group. If a radio button is not checked, focus moves to the first radio button in the group.
Spacebar	If the radio button with focus is not checked, changes the state to checked. Otherwise, does nothing.
Arrow-keys	Moves focus to and checks the previous or next radio button in the group

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the element, expresses its state
Doubletap	If the radio button with focus is not checked, changes the state to checked. Otherwise, does nothing.

3 Screenreader output for all devices

Reads	I hear
Name	Its label and purpose is clear
Role	It identifies itself as a radio option
Group	Each option has an associated label and the radio group name
State	It expresses its state (selected, checked, disabled)

A star rating input must meet these WCAG principles.

1Perceivable

Is easy to identify as interactive
Color is not used as the only means of conveying information

2Operable

Is keyboard operable
The click/tap target area is no smaller than 44x44px
The disabled and focus states have a 3:1 minimum contrast ratio against default
The focus indication has a 3:1 minimum contrast ratio against adjacent elements
The focus indication has a minimum area equal to the width of the element and 2px in height

3Understandable

Its purpose is clear in the context of the whole page

4Robust

Conveys the correct semantic role
Expresses its state
Meets criteria across platforms, devices and viewports

Code examples

As radio group

This radio group uses CSS to reverse the visual order of the radio inputs while preserving accessibility.

<fieldset>
  <legend>
    Rate this product
  </legend>
  <div class="star-rating">
    <input type="radio" class="star" name="star" id="star-5">
    <label for="star-5">
      <span class="hidden">5 star</span>
    </label>
    <input type="radio" class="star" name="star" id="star-4">
    <label for="star-4">
      <span class="hidden">4 star</span>
    </label>
    <input type="radio" class="star" name="star" id="star-3">
    <label for="star-3">
      <span class="hidden">3 star</span>
    </label>
    <input type="radio" class="star" name="star" id="star-2">
    <label for="star-2">
      <span class="hidden">2 star</span>
    </label>
    <input type="radio" class="star" name="star" id="star-1">
    <label for="star-1">
      <span class="hidden">1 star</span>
    </label>
  </div>
</fieldset>

Rate this product

Displaying star ratings

The element must clearly express the rating and scale.

<p class="stars">
  <span class="scale">
  </span>
  <span class="rating">
  </span>
  <span class="hidden">
    Rating: 4 out of 5 stars
  </span>
</p>

Rating: 4 out of 5 stars