WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to make a visual rating scale accessible

for

From: Patrick H. Lauke
Date: Jun 7, 2016 7:41AM

On 07/06/2016 14:24, David Farough wrote:
> I know that the graphics may look better, but from an accessibility
> point of view they are just awful.

Don't confuse bad implementations with "graphics are awful" though.

> For the sake of an interactive rating you could use a select. and when
> presenting non interactively, you could use a read only edit.
>
> I often get book reviews from audible where they present the rating
> using a series of 5 graphics, all of which have an alt of "Rating
> value". To make matters worse, they present 3 different rating
> categories, Over all, Story, and Performance. You can guess how
> frustrating this gets listening to the screen reader repeat rating value
> 5 times between each category.

That's clearly bad implementation on the part of the developers there.
If they must use 5 separate <img> elements, the best advice would be for
the first image to have an alt text relaying the overall rating (e.g.
alt="4 out of 5 stars") and for the remaining four images to have an
empty alt="".

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke