WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Standard for star ratings interfaces?

for

From: Birkir R. Gunnarsson
Date: Jan 13, 2015 6:41AM

I have seen a slider interface for the star rating, and a slider or a
spinbutton seems to be the right control for the task.
Just make sure to use aria-valuetext rather than aria-valuenow as the
star rating is not simply an integer.
I think the JQuery slider was either accessible or close, but I am not
sure about this.
The star rating slider I helped work on is used behind a password
protected aria of a website so I cannot post a direct link to it.
Cheers
-B

On 1/13/15, _mallory < <EMAIL REMOVED> > wrote:
> 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>
>>
>>
>>
>> >> >> > > > >


--
Work hard. Have fun. Make history.