Product ratings are represented with 1 to 5 stars. Other sites have used inline images; repeating a solid or empty version for each of the five stars. Other sites, such as Yahoo! Shopping, have used a single inline image representing the number of stars.  At best, the image will have an alt attribute that descibes the number of stars. However, the content is locked inside the image. This is an easy approach for coding but isn’t the most accessible approach.

Yahoo! Tech uses the content first approach to design

Content-first design improves accessibility. This approach places the relevant content in semantic markup. It then uses CSS to transform that content into the visual design. Here is a sample rating from Yahoo! Tech: Overall:4/5, Quality:5/5, Support: 3/5. Our CSS transform that simple text into a series of stars and accompanying text. User testing with a screen-reader user led us to remove visual descriptions from the content, i.e."stars" or "bars".

With the content in the page, it was time to look at the visual design.

Ratings are presented in either an unordered list or definition list. We need to place descriptive text in front of the stars and want the stars to be aligned with each other. These considerations lead to using spans with a combination of CSS rules to hide the text, insert a background image, and absolutely position the ratings to the right side of the list item. Let’s look at the code.

The HTML – span

To use a background image for the stars, we need a container that can be manipulated with CSS and not include presentational behaviors of its own. This is why we use the span, a generic inline container. We could use a strong or em, but feel the span offers the best versatility. You never know when the graphic designer will ask for some text to be bolded or emphasized in the same list item.

Sample code for a rating

The span’s title will generate a tooltip when the user places their mouse over the rating (not Internet Explorer). Screen readers’ default settings ignore title attributes on non-form items.

The CSS

Spans are inline elements.  To display background images, we need to make them display block, define a height, width, and move the text off the screen. To keep them inline with the text, we are also positioning them absolutely. We could position them relatively or floated the spans. Position absolute works the best for our pages.The parent list item is positioned relatively to give the span a contextual anchor. Negative text-indent will hide the rating text.


.ratingslist {list-style-type:none;}
.ratingslist li {position:relative; padding:3px 5px; }
.ratingslist li span {text-indent:-1000em; width:66px; display:block; position:absolute; top:5px; right:20px;}


Image sprites display the desired number of stars

The list item is given a class with a number at the end (stars8). This will display an image with four out of five red stars. We are using a scale of 0 to 10 to accomodate half stars. To display other rating variations, we change the modifier, i.e. prostars4, retstars4, bars4, bigstars4, etc…

To simplify the maintenance of the site and reduce server requests; Yahoo! Tech also uses image sprites. Sprites are single images that include multiple icons with a consistent spacing between them. Use background positioning to display the desired chunk of the image. Each sprite represents the possible color variations used on the site: red, blue, and green. Minimizing the color palettes reduces the final image size. For more information on sprites, read CSS Sprites: Image Slicing’s Kiss of Death by Dave Shea. As a further enhancement, alpha transparent png images are used for most browsers and index-transparent gifs are presented in the Internet Explorer 6 style sheets. 

Background images are positioned with the set of numbers after "no repeat." The horizontal positioning is first. Our sprite is vertical, so we are leaving it alone, hence the 0 value. The vertical positiong comes next. If we want to display 2 out of 5 stars, we need to shift the background down to that part of the image (-530px). Here is the CSS for presenting the specific star variant.


/* Ratings images
======================================= */
.stars0 span {background:url(/images/bg-ratings.png) no-repeat 0 -650px;}
.stars1 span {background:url(/images/bg-ratings.png) no-repeat 0 -620px;}
.stars2 span {background:url(/images/bg-ratings.png) no-repeat 0 -590px;}
.stars3 span {background:url(/images/bg-ratings.png) no-repeat 0 -560px;}
.stars4 span {background:url(/images/bg-ratings.png) no-repeat 0 -530px;}
.stars5 span {background:url(/images/bg-ratings.png) no-repeat 0 -500px;}
… (repeated for each variation of the stars and bars)


This approach has allowed the Yahoo! Tech engineers to maintain a consistent presentation with minimal markup. For pages that need special tweaks we can easily adjust the positioning by using descending selectors:


#mytech .ratingslist li span { right:5px;}


Caveats

We’ve only found a few small issues with this approach.

• You cannot count on background images being displayed on the printed page. Our print style sheet removes the text-indent and background images to display “Overall: 4/5”.
• When someone includes more than 4 products in the comparison table, the text of some rating parameters will begin to overlap the stars. If they were inline images or if we floated the spans, they may drop to the next line.

Yahoo Tech! ratings are another example of creating accessible and visually dynamic pages by considering the underlying content structure before attacking the styles. Users of all abilities are presented with solid information. That’s how you can deliver a 5 star page every time.

Related Information

• CSS Sprites: Image Slicing’s Kiss of Death by Dave Shea.
• Making Flash Accessible to Screen Readers
• Standardista Search: Sprites

This is about using a Definition List and the DOM to create a nice FAQ page where clicking on the DTs (the questions) “toggles” the associated DDs (the answers).

Note: If you’re already using this solution, please check your version number (this is version 1.5.4). Before you download the newest version I suggest to go through the entire article again (since a few things have changed).

This is what it does:

Open AllClose All

Question 1?

The vitality of conceptual synergies is of supreme importance exploiting the productive lifecycle working through a top-down, bottom-up approach. To focus on improvement, not cost, from binary cause and effect to complex patterns, while those at the coal face don’t have sufficient view of the overall goals.

Question 2?

To focus on improvement, not cost, from binary cause and effect to complex patterns, while those at the coal face don’t have sufficient view of the overall goals. To ensure that non-operating cash outflows are assessed.

Question 3?

The vitality of conceptual synergies is of supreme importance exploiting the productive lifecycle working through a top-down, bottom-up approach. To focus on improvement, not cost, from binary cause and effect to complex patterns, while those at the coal face don’t have sufficient view of the overall goals. To ensure that non-operating cash outflows are assessed. The vitality of conceptual synergies is of supreme importance exploiting the productive lifecycle working through a top-down, bottom-up approach.

Question 4?

The vitality of conceptual synergies is of supreme importance exploiting the productive lifecycle working through a top-down, bottom-up approach. To ensure that non-operating cash outflows are assessed.

Question 5?

The vitality of conceptual synergies is of supreme importance exploiting the productive lifecycle working through a top-down, bottom-up approach. To focus on improvement, not cost, from binary cause and effect to complex patterns, while those at the coal face don’t have sufficient view of the overall goals. To ensure that non-operating cash outflows are assessed.

The main advantages of the basic technique (related to the DL):

• It uses semantic markup.
• It degrades nicely (hidden elements are visible in script-disabled UAs).
• DTs do not appear as links without script support.
• It does not use inline event attribute (onclick()).
• It does not require A elements in the markup.
• It is screen-readers “friendly”.
• It is keyboard “friendly”.
• It is IE Mac compatible.
• It relies on one single hook.
• It allows the author to add/move/delete DT/DD pairs easily (there is no variable in the script to edit and there are no class or ID to include nor change).
• It is “powered” by a very light script (3Kb).

About the “Show All/Hide All” “links”:

• they let the user expand all answers at once, so it is possible to search the document.
• they are hidden from Javascript-challenged browsers.
• they can be “Named Anchors”, images or SPANs (actually they can be any inline elements or any other elements styled as inline).

This is more or less a plug-and-play solution (script and stylesheets are at the bottom of this page).
You’ll need to:

1. Create a Definition List (do not use more than one DD per DT.); the markup for the one above looks like this:

   Question 1

   The vitality of conceptual synergies...

   Question 2

   To focus on improvement, not cost, ...

   Question 3

   The vitality of conceptual synergies...

   Question 4

   The vitality of conceptual synergies...

2. Assign a specific ID to your DL:
   
<dl id="TJK_DL" />

3. Download this ZIP File (3Kb) and unzip its content in the same directory as your FAQ page.
4. In your FAQ page, right above the closing headtag cut and paste the following:
   <script type="text/javascript" src="TJK_ToggleDL/TJK_ToggleDL.js"></script>
5. Call the script, for example using:

   <body onload="TJK_ToggleDL()">

   Note: In case you want to add multiple onload handlers to a page, make sure to read executing JavaScript on page load.

6. In order to use the “Show All” / “Hide All” feature, you will need to create 2 named anchors with specific IDs (TJK_ToggleON and TJK_ToggleOFF). Dreamweaver users can take advantage of the “Named Anchor” icon in the toolbar to easily create the required markup. Dreamweaver will plug the name attribute as well, but that’s OK, you can either delete it or ignore it.
   This is the markup I’m using in this page:

   <a id="TJK_ToggleON">Open All<<a id="TJK_ToggleOFF">Close All</a>

   Note: adjacent anchors are confusing in text-browsers.

   You can also replace these Named Anchors with other inline elements, for example SPAN or IMG (yes, images). Just make sure to set the proper IDs.

7. Because we want to hide these “links” from script-challenged UAs, you need to include the following rule somewhere inside your stylesheet:

   #TJK_ToggleON,#TJK_ToggleOFF {display:none}

   Note: You can also use a style element to include this rule in the head of your document (your FAQ page).

You’re done!

Feel free to edit the rules in the CSS file to fit your needs.

Note: in case your questions are more than one line long, you may want to change this: “background:0 50%” to this: “background:0 0″ and add “display:block” to the #TJK_DL dt a {} rule (to avoid any “wrapping”).

For the curious

TJK_ToggleDL.js

TJK_ToggleDL.css

Note: “cursor:hand” is for IE5 Win, but this declaration will make this sheet fail Validation. If Validation is important to you, you can either delete this declaration or move it inside a Conditional Comment.

TJK_ToggleDL_ie5mac.css

For the DOM police

Earlier versions of this script did not use document.write(), I was using the DOM to plug the stylesheets in the HEAD element. Unfortunately, setting the rel attribute of the LINK element makes Safari “go blank” and STYLE fails in IE Win. So, I decided to go with what works!

This script should work in HTML and XHTML documents.