WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible 5-star rating widget

for

From: Terrill Thompson
Date: Apr 7, 2010 10:03AM

Thanks for the tip Randi. However, I'm not finding an accessible star-rating on Amazon.com. I wonder if they're pushing a Randi-only version to you since you contacted them! Browsing the Amazon site, I see that when they're reporting the average rating for products that's accessible. It's just an image with alt="2.8 out of 5 stars" or whatever the actual rating is. Interestingly, this is only accessible on the main site. On the screen reader -friendly site (http://amazon.com/access) these same images have no alt! On the "accessible" site I couldn't find any way to rate products.

On the main site, most items have a 5-star rating widget under the level 2 heading "Rate This Item to Improve Your Recommendations". I checked several products in several categories, and from my experience they're all the same: The rating widget is just a set of six <span> elements.

The first of these includes the text "I own it" and looks like a checkbox, but that's an illusion created with a background image. If I click on it the background image is swapped for a checked checkbox. (I guess this is where aria-role="checkbox" and associated ARIA markup would be useful (or they could just use an HTML checkbox), but in this case they've done neither so screen readers offer no clue that this is a checkbox.

The remaining span elements are the stars. They all have tabindex="0" so they're keyboard accessible. But again the stars are just an illusion created with background images. There is no information offered to screen readers as to what these elements are.

Still looking for an accessible example...

Terrill