Previous technique
Next technique

Accessible rating component

WCAG 2.2
A
#ratings

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>
Source of this technique  Opens in a new window

Learn more about the related success criteria: