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


-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Randi
Sent: Tuesday, April 06, 2010 8:08 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Accessible 5-star rating widget

I just had an issue with Amazon and their stars thing. It used to work
and then it didn't. I contacted them and their accessibility team
fixed it. It's now just radio buttons, so I don't know if that's a
widget, but it works, if you want to see what they use. It's the one
for rating items.


*Randi and Guide Dog Jayden

Doggy Diaries and other ramblings at:
http://raynaadi.blogspot.com/

On Apr 6, 2010, at 7:44 AM, Terrill Thompson wrote:

> Does anyone have a recommendation for a 5-star rating widget that's
> accessible by keyboard, accessible to screen reader users, and
> accessible to people with color blindness? I prefer jQuery but I'm
> not attached to it.
>
> Thanks!
>
> Terrill Thompson
> Technology Accessibility Specialist
> DO-IT, Accessible Technology
> UW Technology Services
> University of Washington
> <EMAIL REMOVED>
>
>
>
>