Star Rating Widget

A star rating widget usually contains images of 5 stars which is used to rate an object. The widget is mostly seen in e-commerce, entertainment and several service providing portals where the feedback of the user is valued. A user simply clicks on the stars to rate an item. For example if there are 5 stars and user clicks on 3rd star, the rating would 3-star out of 5.

A mouse user can easily navigate to a particular star and clicks on it to give rating. Mostly an image would be used with 5 stars and developers track where an user is clicking with mouse and change the image dynamically. But users who rely on keyboard may not be able to activate the star using keyboard alone.

To make it accessible with keyboard as well, semantic HTML elements like radio buttons has to be used to represent each star.

An example of star rating widget is present in W3C Web Accessibility Tutorials External Website website. Lets see how it is implemented in W3C tutorials.

Implementation:

Radio buttons are used to represent 5 stars and each radio button is associated with a label respectively. An off-screen text is provided with in a span and SVG is used to display the “Star” images visually on the screen. The off-screen text and svg are enclosed in the label.

As native HTML radio buttons are used to represent each star, the widget is available for keyboard users as well. Initially all stars are in grey color and if a radio button is checked, the corresponding svg star gets an underline and also color of all stars present till the selected radio button changes to yellow. The screen reader user knows the rating from the off-screen text present in the label.

Drawback:

In IE, when keyboard focus is on 3-star radio button and user activates it, the 3-star radio button gets checked. Now on hit of TAB key, the focus moves to the svg of 4th radio button but a visible focus indicator or underline is not present around the star image. Hence keyboard user may not understand on which element the keyboard focus is on.

Ideally the focus should come out of the rating widget since all the radio buttons belongs to single group. Due to the presence of svg element, the focus is moving to the next star without a keyboard focus indicator.

Remedy:

To overcome the above problem, just add “focusable” attribute to the svg element. If the attribute value is set “true” then svg element won’t receive keyboard focus. (tabindex=”-1” doesn’t work in this case).

HTML Code:

<input value=”0″ id=”star0″ checked type=”radio” name=”rating” class=”visuallyhidden”>
<label for=”star0″>
<span class=”visuallyhidden”>0 Stars</span>
<svg viewBox=”0 0 512 512″ focusable=”false”>
<g stroke-width=”70″ stroke-linecap=”square”>
<path d=”M91.5, 442.5 L409.366489, 124.633512″></path>
<path d=”M90.9861965, 124.986197 L409.184248, 443.184248″></path>
</g>
</svg>
</label>

Now when the keyboard focus is on 3rd star and on hit of TAB key, the focus moves out from the rating widget.

2 Comments to "Star Rating Widget"

  1. February 11, 2017 - 2:37 am | Permalink

    Interesting IE fix, thanks for writing this up!

    Here’s another great star rating widget: http://cssmojo.com/developing-an-accessible-star-ratings-widget/

    Also, under Remedy, I think you mean to say false instead of true.

Comments are closed.