E-mail List Archives
Thread: Standard for star ratings interfaces?
Number of posts in this thread: 9 (In chronological order)
From: Judith.A.Blankman
Date: Mon, Jan 12 2015 3:04PM
Subject: Standard for star ratings interfaces?
No previous message | Next message →
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 ADDRESS REMOVED =
From: Jonathan Avila
Date: Mon, Jan 12 2015 3:37PM
Subject: Re: Standard for star ratings interfaces?
← Previous message | Next message →
> 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 ADDRESS REMOVED =
703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
From: Judith.A.Blankman
Date: Mon, Jan 12 2015 3:58PM
Subject: Re: Standard for star ratings interfaces?
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED =
>
>703-637-8957 (o)
>Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
>
>
>
From: _mallory
Date: Tue, Jan 13 2015 1:08AM
Subject: Re: Standard for star ratings interfaces?
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED =
>
>
>
> > >
From: Birkir R. Gunnarsson
Date: Tue, Jan 13 2015 6:41AM
Subject: Re: Standard for star ratings interfaces?
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>>
>>
>>
>> >> >> > > > >
--
Work hard. Have fun. Make history.
From: _mallory
Date: Tue, Jan 13 2015 7:21AM
Subject: Re: Standard for star ratings interfaces?
← Previous message | Next message →
On Tue, Jan 13, 2015 at 08:41:40AM -0500, Birkir R. Gunnarsson wrote:
> 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.
Oh? I think Gidon's plugin uses valuenow, is that because valuenow
can't deal with floats (numeric floats I mean)?
> I think the JQuery slider was either accessible or close, but I am not
> sure about this.
This might not be his latest version but it's the one he released
after testing in VO:
http://stommepoes.nl/Cloudsuite/rateitexample/rateitexample.html
(this implementation happens to use default star images, default
star sizes (16px) and defaults to whole-star ratings, so I guess
valuenow would technically work here)
The dev has to write the base HTML so only parts from the plugin
you see is via the browser devtools.
_mallory
From: Jonathan Avila
Date: Tue, Jan 13 2015 7:38AM
Subject: Re: Standard for star ratings interfaces?
← Previous message | Next message →
> 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 ADDRESS REMOVED =
Phone 703.637.8957
From: Judith.A.Blankman
Date: Tue, Jan 13 2015 10:38AM
Subject: Re: Standard for star ratings interfaces?
← Previous message | Next message →
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 ADDRESS REMOVED =
On 1/13/15 6:38 AM, "Jonathan Avila" < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>Phone 703.637.8957
>
>
>
From: Paul J. Adam
Date: Tue, Jan 13 2015 10:50AM
Subject: Re: Standard for star ratings interfaces?
← Previous message | No next message
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 ADDRESS REMOVED = > < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>
>
>
>
> On 1/13/15 6:38 AM, "Jonathan Avila" < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>> Phone 703.637.8957
>>
>>
>>