E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 3 (In chronological order)

From: Terrill Thompson
Date: Tue, Apr 06 2010 9:45AM
Subject: Accessible 5-star rating widget
No previous message | Next message →

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 ADDRESS REMOVED =

From: Randi
Date: Tue, Apr 06 2010 10:06AM
Subject: Re: Accessible 5-star rating widget
← Previous message | Next message →

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 ADDRESS REMOVED =
>
>
>
>

From: Terrill Thompson
Date: Wed, Apr 07 2010 10:03AM
Subject: Re: Accessible 5-star rating widget
← Previous message | No next message

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