WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to make a visual rating scale accessible

for

From: Jordan Wilson
Date: Jun 6, 2016 11:48PM

Are the stars interactive? Can you click on them to set a rating?
If they're not interactive, you could dynamically write the rating to an sr-only span tag after the ‘Quality' label.

pseudocode: <p>Quality:<span class='sr-only'>3 stars out of 5</span></p> [shape-on] [shape-on] [shape-on] [shape-off] [shape-off]

If they're interactive it's a tougher task, because the buttons themselves would need to be accessible.
Inline images is probably the only widely supported way to get that accomplished – basically using a sprite but not a css sprite.
https://css-tricks.com/css-sprites-with-inline-images/

On 6/6/16, 8:12 PM, "WebAIM-Forum on behalf of Whitney Quesenbery" < <EMAIL REMOVED> on behalf of <EMAIL REMOVED> > wrote:

>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>
>>>>