WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Standard for star ratings interfaces?

for

From: Judith.A.Blankman@wellsfargo.com
Date: Jan 13, 2015 10:38AM


Thanks for all the responses thus far. I realized this morning after
reading them that I may have omitted an important detail.

This is a star rating for a mobile app, with a link to an app store (Apple
or Google, I assume) to write a review.

The stars are sufficiently sized. The set spans the width of the
smartphone. Tap target spacing is sufficient.

Does this change any of the recommendations? Is there something that
might/could be iOS and/or Android specific that would be helpful to know
about or more accessible?

Best,

Judith Blankman

Accessibility Strategist
Customer Experience

Wells Fargo Virtual Channels | 550 California Street, 2nd floor | San
Francisco, CA 94104
MAC A0122-020
Tel 415-947-6583 | Cell 415-601-1114 | Fax 415-974-7452

<EMAIL REMOVED>




On 1/13/15 6:38 AM, "Jonathan Avila" < <EMAIL REMOVED> > wrote:

>> Is it like a mini image map or something? I'm unclear how one sets up a
>>button to cycle through a selection. Or should it be a row of 5 buttons,
>>no list markup?
>
>I would recommend one control, such as a slider/range control or a
>button. It sounds like sliders are already being used so I'm all for
>that. My idea related to a button would be to create a spinner type
>control but I that would require a paradigm that isn't much used and thus
>would require custom coding that would need to be tested for
>accessibility support. I was not thinking of an image map but to a mouse
>user it would respond that way. For keyboard users it would be one tab
>stop. Consider that a page could contain many of these controls and thus
>if you sub divide the control into 5 parts you will create a page with a
>lot of superfluous information that just gets in the way.
>
>Keep in mind that any control would need to correctly identify the
>current position with the group such as 3 of 5 stars.
>
>Jonathan
>
>--
>Jonathan Avila
>Chief Accessibility Officer
>SSB BART Group
> <EMAIL REMOVED>
>Phone 703.637.8957
>
>
>-----Original Message-----
>From: <EMAIL REMOVED>
>[mailto: <EMAIL REMOVED> ] On Behalf Of
> <EMAIL REMOVED>
>Sent: Monday, January 12, 2015 5:59 PM
>To: <EMAIL REMOVED>
>Subject: Re: [WebAIM] Standard for star ratings interfaces?
>
>Jonathan,
>
>Is it like a mini image map or something? I'm unclear how one sets up a
>button to cycle through a selection.
>
>Or should it be a row of 5 buttons, no list markup?
>
>On 1/12/15 2:37 PM, "Jonathan Avila" < <EMAIL REMOVED> > wrote:
>
>>> I'm curious whether there is a standard treatment or recommendation
>>>for a star ratings interface on a mobile device
>>
>>Five separate stars and all the list markup may be too verbose. One
>>option would be to use a button that allows you to cycle through
>>1,2,3,4, or 5 stars. The accessible name of the button would be the
>>current star rating. An aria-description might be used to explain to
>>the user how to cycle through the options and aria-live could be used
>>to announced the new state on interaction.
>>
>>Jonathan
>>
>>
>>--
>>Jonathan Avila
>>Chief Accessibility Officer
>>SSB BART Group
>> <EMAIL REMOVED>
>>
>>703-637-8957 (o)
>>Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
>>
>>
>>-----Original Message-----
>>From: <EMAIL REMOVED>
>>[mailto: <EMAIL REMOVED> ] On Behalf Of
>> <EMAIL REMOVED>
>>Sent: Monday, January 12, 2015 5:04 PM
>>To: <EMAIL REMOVED>
>>Subject: [WebAIM] Standard for star ratings interfaces?
>>
>>I'm curious whether there is a standard treatment or recommendation for
>>a star ratings interface on a mobile device (although I think the same
>>principles should apply as desktop.)
>>
>>This is regarding a horizontal row of 5 stars where each is clickable
>>to indicate one's rating. The default state is visually presented as
>>gray, no highlight color, no selection made.
>>
>>This is how I'm thinking I'd recommend how to specify.
>>
>> * Code as a list of 4 images with alt text (not background images?)
>>to support high contrast mode (for low vision users)
>> * Use ARIA to define the images as buttons
>> * Indicate programmatically which set of stars is selected (1 star, 2
>>stars, or 3 stars, etc.)
>> * I realize we can't use ARIA for lists to indicate selection.
>> * Visually a selection would be highlighted using color
>> * The selected star/button/image would say for example "4 stars"
>>for a 4 star rating
>>
>>Best,
>>
>>
>>Judith Blankman
>>
>>Accessibility Strategist
>>Customer Experience
>>
>>
>>
>>Wells Fargo Virtual Channels | 550 California Street, 2nd floor |
>>San Francisco, CA 94104
>>
>>MAC A0122-020
>>
>>Tel 415-947-6583 | Cell 415-601-1114 | Fax 415-974-7452
>>
>>
>> <EMAIL REMOVED>
>>
>>
>>
>>>>>>messages to <EMAIL REMOVED>
>>>>>>messages to <EMAIL REMOVED>
>
>>>messages to <EMAIL REMOVED>
>>>