Accessible rating component
Rating systems are a very common pattern on the internet. Here is a very elegant and fully accessible solution using HTML only. Go to the source of the technique for a complete explanation fo the pattern.
<fieldset class="star-rating">
<legend>Your rating:</legend>
<div>
<input type="radio" name="rating" value="1" id="rating1" />
<label for="rating1"><span>1</span></label>
<input type="radio" name="rating" value="2" id="rating2" />
<label for="rating2"><span>2</span></label>
<input type="radio" name="rating" value="3" id="rating3" />
<label for="rating3"><span>3</span></label>
<input type="radio" name="rating" value="4" id="rating4" />
<label for="rating4"><span>4</span></label>
<input type="radio" name="rating" value="5" id="rating5" />
<label for="rating5"><span>5</span></label>
</div>
</fieldset>
Learn more about the related success criteria:
1.1.1 Non-text Content (Level: A)
1.3.1 Info and Relationships (Level: A)
1.4.1 Use of Color (Level: A)
2.1.1 Keyboard (Level: A)
2.4.1 Bypass Blocks (Level: A)
3.3.2 Labels or Instructions (Level: A)
4.1.2 Name, Role, Value (Level: A)