WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to make a visual rating scale accessible

for

From: Birkir R. Gunnarsson
Date: Jun 7, 2016 12:41AM

Assuming it's all in a span and not interactive you can do <span
role="img" aria-label="3 out of 5">



On 6/7/16, Jordan Wilson < <EMAIL REMOVED> > wrote:
> 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>
>>>>>>>>>
> > > > >


--
Work hard. Have fun. Make history.