WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Standard for star ratings interfaces?

for

From: _mallory
Date: Jan 13, 2015 1:08AM

My company was using a non-keyboardable jQuery star rating thing,
so I changed parts of it so that you could focus on it, key through
with arrow keys, and an offscreen element would announce your current
star number.

A modified plugin isn't as good as writing from scratch: while there is
a range input (a slider), it's only there in case Javascript is off I
think, as it's otherwise display:none, so not useable. Also, lots of
divs with aria-stuff instead of real inputs, and the "delete" button has
aria-label instead of, what would be better, an img with alt text.

The stars are a single sprited image, and the benefit of this is that
users could (if the code options were set for it) select half or quarter
stars ("2 and a half stars"), where the amount of the image visible
shows visually how many stars, or parts of stars, you have selected. So,
one input (range, or number could also work) rather than many buttons.

The plugin writer was interested in making it work with screen readers
once he was told of the issue, which was awesome. He tested it in VO
though, as he's a Mac user. Also, while it has touch events, because the
stars are so small, I can't imagine anyone being able to choose stars
with any precision with fingers. But those are default stars, larger ones
could be chosen instead.

_mallory

On Mon, Jan 12, 2015 at 10:04:28PM +0000, <EMAIL REMOVED> wrote:
> 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>
>
>
>
> > >