WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Standard for star ratings interfaces?

for

From: Jonathan Avila
Date: Jan 13, 2015 7:38AM

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