Accessible Star Rating Widget

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 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 3^rd star, the rating would 3-star out of 5.

      A mouse user can easily move to a particular star and clicks on it to give rating. Mostly an image would be displayed with 5 stars and developers track where 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 there in w3c Web Accessibility Tutorials (Opens in new window) website.

URL : https://www.w3.org/WAI/tutorials/forms/custom-controls/

Implementation:

      Radio buttons are used to represent the 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.

If a radio button is checked, the corresponding svg star gets an underline and also all the stars present till the selected radio button color changes.

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 4^th 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.

Adding attribute to svg

      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 3^rd star and on hit of TAB key, the focus moves out from the rating widget.