WebAIM - Web Accessibility In Mind

E-mail List Archives

How to make a visual rating scale accessible

for

From: Whitney Quesenbery
Date: Jun 6, 2016 6:12PM

Hi,

I need some coding advice on making a visual rating scale accessible.

The design calls for a category to be rated followed by 5 shapes - some
active the others inactive - to indicate the rating out of 5. The rating
is never written as text: it's simply visual.

The simplest solution is to create five images, one for each rating level,
so we can put alt text on them indicating the value. In pseudocode,
something like:

Quality: <img src="3of5.svg" alt="three (of five)"

Now, the question.
Someone suggested that we could build the rating display out of css shapes,
so there's no graphic to load. It would look something like this:

Quality: [shape-on] [shape-on] [shape-on] [shape-off] [shape-off]

But, I don't see where I would put the text version of the rating, without
changing the visual presentation.

Anyone have any advice?

Whitney

--
*Whitney Quesenbery*
(lists) <EMAIL REMOVED>
(work) <EMAIL REMOVED>