WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to make a visual rating scale accessible

for

From: _mallory
Date: Jun 7, 2016 2:44PM

As someone easily confused by icons, I would love text myself.
Usually the stars are images: when they are interactive, they're
a b*tch to hit with your fat fingers and when they aren't, they
turn to fuzzballs when you magnify text (this mostly an issue
when there are empty stars/shapes and the lines for those are
small, thin and light grey, making it hard to tell what the
total range is). This might not be an issue if these are created
with CSS shapes in em-sizing though, would be cool to check out
the result.

However usually the Graphics Overlord determines that There
Shall Only Be Stars.

If yours is softer than mine, then if you can convince on
visible text, that is nicer. Not everyone is a cognitive
Sherlock Holmes, and I don't care that GO's 14-year-old
daughter "easily understands what it means", she's not me.

_mallory

On Tue, Jun 07, 2016 at 11:27:56AM -0700, whitneyq wrote:
>
> The stars are not interactive so that's easier
> I get it about making Sr-only text...is that better practice? I always wonder if there are others who would need it but have it hidden from them with this technique.
> Thanks
> Sent from my Verizon, Samsung Galaxy smartphone
> -------- Original message --------From: Jordan Wilson < <EMAIL REMOVED> > Date: 6/6/16 10:48 PM (GMT-08:00) To: WebAIM Discussion List < <EMAIL REMOVED> > Subject: Re: [WebAIM] How to make a visual rating scale accessible
> 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>
> >> >> >> >>
> > > > > > > >