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