WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Standard for star ratings interfaces?

for

From: Judith.A.Blankman@wellsfargo.com
Date: Jan 12, 2015 3:58PM

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