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 should 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>