Developing an Accessible Star Ratings Widget

Many ecommerce sites, social networking services, and online communities include rating or assessment features. Soliciting people's opinion has even become a business model; there are now sites dedicated to rating products, services, businesses, and more.

The most common interface used to display votes is the "star rating system," in which a particular number of points (often expressed as stars) is assigned to an item by each reviewer. We find this model on many sites, from Amazon to Yelp.

As Figure A shows, both visual interfaces are similar, but what makes these two solutions interesting is their markup base. One relies on <map>, the other on <img>.

You might think that most rating systems would be based on some markup proven to be semantic and "operational" across many User Agents — that is, that rating systems would be based on a specific set of HTML elements and attributes to which one applies behavior and style via JS and CSS. That would make sense, but it is far from the truth. When it comes to markup, authors try just about everything:

<a>,

<img>,

<span>,

<li>,

<map>,

<div>,

<input>,

and more...

The case of Microformats

Before presenting a few image-based techniques to mark up ratings, I think it is worth mentioning a basic and straightforward approach (from Microformats) that uses characters:

<abbr class="rating" title="3 stars">***</abbr>

Pros

It is straightforward and semantic.

The markup is minimal.

The method is not reliant on CSS.

The method is not reliant on images.

There is no HTTP request.

Cons

It is impossible to represent half values (i.e. 3.5 stars)

It "works" only with asterisks ("star rating").

Screen-readers, by default, do not expand abbreviations (which may not be a big deal in this case).

Note: I use "*" rather than ★ (★) because screen-readers (at least JAWS and NVDA) seem to ignore html entities.

Markup to display image-based ratings

When it comes to display images, authors have many options.

One image per rating

Using a single image:

<img src="4stars.png" alt="4 out of five">

One star

Two stars

Three stars

Four stars

Five stars

Pros

Using one image per rating is straightforward and semantic.

The method is not reliant on CSS.

Minimal markup.

Cons

It creates many HTTP requests as there are many different images.

On top of the performance issue, it can be a maintenance nightmare as authors have to deal with more assets (images to create, to push to a CDN, to modify when site colors change, etc.).

Text selection is not possible in Opera (at least in version 9.52) as the alternate text is ignored

Using two img elements per rating diminishes the number of HTTP requests.

The method is not reliant on CSS.

Cons

In Opera, when images are disabled, alternate text is not selectable, and (in small-screen view) that text is rendered with a border which makes it less legible.

Note that this is taken from a controversial working draft. In my opinion, this method is not acceptable because the alternate text does not describe the image accurately and succinctly. Besides, if the basis of this approach is that these images represent content, then why leave some of them with noalt text?

On Ajaxian, for example, the author is using alternate text with every single image, which makes a lot of sense if he considers that each one is content:

In any case, using as many images as there are stars versus using a single element (an img or something else) has the main advantage of facilitating voting mechanisms - where a user selects one of the stars to cast his vote. So we should keep this in mind...

A sprite for background images

The following technique is a adaptation of a strategy originally implemented by developers at Yahoo! Music:

Result

Introducing the sprite image in the markup

For this solution, we are using a smaller sprite than the one in the example above. It is now composed of two single stars ("on" and "off").

We place img elements inside the labels. We assume they will have no value without CSS support, thus we "hide" them by setting specific dimensions via their width and height attributes. Note that using 0 with both attributes would show a broken image in some UAs.

Note that with the above markup, we can expect (in most browsers) field selection via label selection.

Considering Accessibility

Unfortunately, as is, this markup creates issues in at least two screen-readers: JAWS and NVDA (see test case for these bugs). The problem is related to the use of a title attribute and an empty string for alternate text.

The workaround to not confuse screen-reader users is to use "stars" as alternate text (alt) and use JavaScript to insert title on mouseover.

Result

Rating

1/5 2/5 3/5 4/5 5/5

Not relying on image alone to display information

It's important to offer an alternative to the display of stars in case images are not available. This is because labels and radio buttons are styled to be on top of each other. A simple solution is to move input and text off-screen (i.e. using text-indent:-999em) and apply a background color to the labels.

CSS

Giving more thought to the process

At this point, it is possible to cast votes without script support, but sighted users have no clue about their selection. So we use JavaScript to:

give feedback to the user regarding his selection,

give keyboard users a visual clue while they navigate through the radio buttons.

At the same time, we take advantage of using a script to insert title attributes that will create "tooltips" when users hover over the labels/stars.

Because of the lack of feedback regarding selection without JavaScript, we style labels and form controls only if there is script support. To do so we use JavaScript to set a flag on the html element and then we create a rule based on descendant selectors containing that hook. If the flag is missing, that rule does not apply and elements are not styled.

This is the demo page, the final product. To see how this solution behaves according to various settings, you may want to use your favorite developer tools to increase text-size, break image paths, disable JavaScript, turn CSS off, and more...

Wrap up

In this process, users' feedback is essential because following best practices is not always a sure thing. For example, as mentioned earlier, setting no value for the alt attribute of the images within the labels seem to be the safe thing to do, but it turns out that it creates issues with at least two screenreaders (see test case).

The goal here was not to fix everything, though. Being able to cast votes without a pointing device was one of my priorities, but improving the look and feel of the solution in Opera when images are disabled is not something I consider essential.

The most interesting part of this "journey" was to make the solution accessible to many users under various conditions, addressing issues such as:

images off,

javascript off,

CSS off,

a combination of the above.

It is also nice to know that this technique relies on img elements rather than background images, which allows the stars to:

resize themselves according to the user's settings,

show in high contrast mode,

be printed by default (unlike background images).

All of this comes without sacrificing performance, as this solution relies on this single sprite:

Late finding

I recently discovered the system Amazon has built for its voting page. It is quite interesting as they serve a different solution depending on script support. If there is script support, they use an image <map> (interesting approach), if there is no script support they use radio buttons. In both cases, the solution is accessible to keyboard users, and this helps to maximize access to a feature that is a core differentiator for the Amazon platform.

Note that they do not use JavaScript to replace the radio buttons with a image <map>; instead, they use noscript elements in which table markup contains radio buttons.