WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Standard for star ratings interfaces?

for

From: Jonathan Avila
Date: Jan 12, 2015 3:37PM

> 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>