WebAIM - Web Accessibility In Mind

E-mail List Archives

Standard for star ratings interfaces?

for

From: Judith.A.Blankman@wellsfargo.com
Date: Jan 12, 2015 3:04PM

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>