ARIA Rating Control Demo

Click to rate, or tab to set focus and use left, right keys

The markup for the first rating is:

<div id="value" class="rating">
<span title="pick rating">Value for money:</span><br/>
<label><input type="radio" name="rating1" value="1" />terrible</label><br />
<label><input type="radio" name="rating1" value="2" />very poor</label><br />
<label><input type="radio" name="rating1" value="3" />poor</label><br />
<label><input type="radio" name="rating1" value="4" />fair</label><br />
<label><input type="radio" name="rating1" value="5" />good</label><br />
<label><input type="radio" name="rating1" value="1" />very good</label><br />
<label><input type="radio" name="rating1" value="7" />excellent</label>
</div>

You also need to include the following in the head:

<link href="rating.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="rating.js"></script>

If the browser has disabled scripting, users can use the radio buttons.

Implemented features:

• Initially unrated, hence no stars.
• Use of Unicode star characters for easy styling.
• Tab/Shift Tab focus in and out of the control.
• Left/right Arrow Keys or Enter for adjustment of rating
• Home and End Key Navigation for worst/best rating.