E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: How to make a visual rating scale accessible

Number of posts in this thread: 9 (In chronological order)

From: Whitney Quesenbery
Date: Mon, Jun 06 2016 6:12PM
Subject: How to make a visual rating scale accessible
No previous message | Next message →

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 ADDRESS REMOVED =
(work) = EMAIL ADDRESS REMOVED =

From: Jordan Wilson
Date: Mon, Jun 06 2016 11:48PM
Subject: Re: How to make a visual rating scale accessible
← Previous message | Next message →

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: Quality:3 stars out of 5 [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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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 ADDRESS REMOVED =
>(work) = EMAIL ADDRESS REMOVED =
>>>>

From: Birkir R. Gunnarsson
Date: Tue, Jun 07 2016 12:41AM
Subject: Re: How to make a visual rating scale accessible
← Previous message | Next message →

Assuming it's all in a span and not interactive you can do 

On 6/7/16, Jordan Wilson < = EMAIL ADDRESS 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: Quality:3 stars out of 5
> [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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>(work) = EMAIL ADDRESS REMOVED =
>>>>>>>>>
> > > > >

--
Work hard. Have fun. Make history.

From: David Farough
Date: Tue, Jun 07 2016 7:24AM
Subject: Re: How to make a visual rating scale accessible
← Previous message | Next message →

I know that the graphics may look better, but from an accessibility
point of view they are just awful.

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.

David Farough

Coordonnateur de l'accessibilité des applications, Services intégrés de
gestion des TI
Commission de la fonction publique du Canada / Gouvernement du Canada
= EMAIL ADDRESS REMOVED = Tél: 819-420-8418 Télécopieur :
819-420-8408

Application Accessibility Co-ordinator, Corporate IT Management
Public Service Commission of Canada / Government of Canada
= EMAIL ADDRESS REMOVED = Tel: 819-420-8418 / Fax: 819-420-8408

>>> "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = > 02:41 AM
Tuesday, June 07, 2016 >>>
Assuming it's all in a span and not interactive you can do 

Ce courriel est destiné exclusivement au destinataire mentionné en titre
et peut contenir de l'information privilégiée, confidentielle ou
soustraite Ã la communication aux termes des lois applicables. Toute
divulgation non autorisée, toute reproduction ou réacheminement est
interdit. Si vous n'Ãªtes pas le destinataire de ce courriel, ou n'Ãªtes
pas autorisé par le destinataire visé, ou encore, si vous l'avez reÃ§u
par erreur, veuillez le mentionner immédiatement Ã l'expéditeur et
supprimer le courriel et les copies.

This e-mail message is intended for the named recipient(s) and may
contain information that is privileged, confidential and/or exempt from
disclosure under applicable law. Unauthorized disclosure, copying or
re-transmission is prohibited. If you are not a named recipient or not
authorized by the named recipient(s), or if you have received this
e-mail in error, then please notify the sender immediately and delete
the message and any copies.

From: Patrick H. Lauke
Date: Tue, Jun 07 2016 7:41AM
Subject: Re: How to make a visual rating scale accessible
← Previous message | Next message →

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

From: whitneyq
Date: Tue, Jun 07 2016 12:27PM
Subject: Re: How to make a visual rating scale accessible
← Previous message | Next message →

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 ADDRESS REMOVED = > Date: 6/6/16 10:48 PM (GMT-08:00) To: WebAIM Discussion List < = EMAIL ADDRESS 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: Quality:3 stars out of 5 [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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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 ADDRESS REMOVED =
>(work) = EMAIL ADDRESS REMOVED =
>>>>

From: whitneyq
Date: Tue, Jun 07 2016 12:31PM
Subject: Re: How to make a visual rating scale accessible
← Previous message | Next message →

Hi David
We agree with you. Â Trying to avoid exactly the experience you describe. And the css sprites actually look better.

Sent from my Verizon, Samsung Galaxy smartphone
-------- Original message --------From: David Farough < = EMAIL ADDRESS REMOVED = > Date: 6/7/16 6:24 AM (GMT-08:00) To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = > Subject: Re: [WebAIM] How to make a visual rating scale accessible
I know that the graphics may look better, but from an accessibility
point of view they are just awful.

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.

David Farough

Coordonnateur de l'accessibilité des applications, Services intégrés de
gestion des TI
Commission de la fonction publique du Canada / Gouvernement du Canada
= EMAIL ADDRESS REMOVED = Tél: 819-420-8418 Télécopieur :
819-420-8408

Application Accessibility Co-ordinator, Corporate IT Management
Public Service Commission of Canada / Government of Canada
= EMAIL ADDRESS REMOVED = Tel: 819-420-8418 / Fax: 819-420-8408

>>> "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = > 02:41 AM
Tuesday, June 07, 2016 >>>
Assuming it's all in a span and not interactive you can do 

Ce courriel est destiné exclusivement au destinataire mentionné en titre
et peut contenir de l'information privilégiée, confidentielle ou
soustraite Ã la communication aux termes des lois applicables. Toute
divulgation non autorisée, toute reproduction ou réacheminement est
interdit. Si vous n'Ãªtes pas le destinataire de ce courriel, ou n'Ãªtes
pas autorisé par le destinataire visé, ou encore, si vous l'avez reÃ§u
par erreur, veuillez le mentionner immédiatement Ã l'expéditeur et
supprimer le courriel et les copies.Â

This e-mail message is intended for the named recipient(s) and may
contain information that is privileged, confidential and/or exempt from
disclosure under applicable law. Unauthorized disclosure, copying or
re-transmission is prohibited. If you are not a named recipient or not
authorized by the named recipient(s), or if you have received this
e-mail in error, then please notify the sender immediately and delete
the message and any copies.

From: _mallory
Date: Tue, Jun 07 2016 2:44PM
Subject: Re: How to make a visual rating scale accessible
← Previous message | Next message →

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 ADDRESS REMOVED = > Date: 6/6/16 10:48 PM (GMT-08:00) To: WebAIM Discussion List < = EMAIL ADDRESS 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: Quality:3 stars out of 5 [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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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 ADDRESS REMOVED =
> >(work) = EMAIL ADDRESS REMOVED =
> >> >> >> >>
> > > > > > > >

From: Patrick H. Lauke
Date: Tue, Jun 07 2016 3:59PM
Subject: Re: How to make a visual rating scale accessible
← Previous message | No next message

On 07/06/2016 19:27, 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.

CSS-based solutions with visually hidden sr-only text will generally not
work for sighted users with images disabled, unless you use some form of
detection to determine if images are indeed turned off, and modify the
CSS accordingly to show the sr-only text.

https://www.paciellogroup.com/blog/2012/08/notes-on-accessible-css-image-sprites/

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