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
>>
>>
>> -----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>
>>
>> >> >> messages to <EMAIL REMOVED>
>> >> >> >
> > >