WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Standard for star ratings interfaces?

for

From: Paul J. Adam
Date: Jan 13, 2015 10:50AM

4 button elements with aria-labels that dynamically change based on which is selected would likely work in the widest AT combos. You could experiment with aria-pressed, aria-selected, title attributes, etc. but they don't all work on those roles, some work but are not "allowed".

4 img elements with alt would be the most bullet proof method I guess but I think all mobile devices support aria-label.

<button aria-label="3 stars" /> <button aria-label="4 stars chosen" /> seems simple enough.

Also I've seen star ratings widgets coded as progressively enhanced radio buttons. Each star is a radio button in the group, this forces only one to be allowed selected and gives you arrow key navigation but is more markup than buttons.

Your proposed solution sounds good though!

Paul J. Adam
Accessibility Evangelist
www.deque.com <http://www.deque.com/>;
> On Jan 13, 2015, at 11:38 AM, < <EMAIL REMOVED> > < <EMAIL REMOVED> > wrote:
>
> 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
>>
>>
>>