Accessible Image-Tab Rollovers

 < Day Day Up > 



To call this particular solution "accessible" could be a bit false. The image-tab navigation I devised for Fast Company's website shares a drawback with the image replacement techniques described earlier in this chapter—that users with "images off/CSS on" will most likely see nothing.

However, for scenarios in which you must use images for navigation, whether it be space constraints or typography requirements, this method is valuable to understand.

The accessible part comes from the fact that, while in the end we're using images for navigational tabs, the markup is still a lean, mean unordered list—accessible by all browsers, phones, PDAs, etc.

Let's take a look at how everything comes together.

The Problem

While I was a member of the Fast Company web team, we needed to fit more items into FC's top navigation. But we ran out of room. Previously, navigation markup was handled by a simple, styled, unordered list. But at a window resolution of 800 600, there wasn't enough additional horizontal space to add even one more item using the current design.

The Solution

I chose to combine and modify the approach in Czech author Petr Stanicek's (a.k.a. Pixy) "Fast Rollovers, No Preload Needed" (www.pixy.cz/blogg/clanky/cssnopreloadrollovers/) and the Leahy/Langridge Image Replacement method described earlier in this chapter to create accessible, JavaScript-free, image-tab rollovers (see Figure 14-11).

click to expand
Figure 14-11: FastCompany.com's tabbed navigation, circa February 2004

How does it work?

The Markup: One List to Rule Them All

I wanted to continue to use a simple unordered list for the navigation in the markup. Much has already been said in this book about using lists for navigation: they're compact, lightweight, and accessible to text browsers, screen readers, PDAs, phones, etc.

Here's what the list looked like originally (I've deleted some of the actual items to make it more convenient to demonstrate):

 <ul >   <li><a href="/" >Home</a></li>   <li><a href="/guides/">Guides</a></li>   <li><a href="/magazine/">Magazine</a></li>   <li><a href="/articles/">Archives</a></li> </ul> 

Nice and simple. Now let's add a unique id to each <li> element so that we can do some fancy stuff with it (namely, replace the boring text with stylized graphics for each tab):

 <ul >   <li ><a href="/" >Home</a></li>   <li ><a href="/guides/">Guides</a></li>   <li ><a href="/magazine/">Magazine</a></li>   <li ><a href="/articles/">Archives</a></li> </ul> 

Now we're ready to create some tab images using Photoshop, or your favorite image editor.

One Image, Three States

The essence of Pixy's brilliant fast rollovers approach involves creating one image for each navigation item that includes normal, hover, and active states stacked on top of each other. Later, we'll use CSS to change the background-position that reveals each state at the appropriate time.

This method eliminates the need to use what was historically JavaScript to swap images and preload multiple sets of images. What a production time-saver—not to mention a means of providing faster downloading.

Figure 14-12 shows an example image that I've created and used for the Fast Company site's navigation. Each state is 20 pixels tall with a total image height of 60 pixels. The top 20 pixels are the normal state, the next 20 pixels show the hover state, and the final 20 pixels show the active state (which is also used for the "you are here" effect). There are similar images for each tab we'd like to use.


Figure 14-12: A single image containing the three states

Using one image for each state allows us to toss out ugly JavaScript that is traditionally used for such effects and instead make use of simple CSS rules for hover effects. This is good. It also eliminates the "flicker" effect that other CSS methods suffer from, where separate on/off images are necessary. This is good. We also don't have to preload any additional images. Again ... this is good.

The CSS: This is Where the Magic Happens

First we'll set up the rules that all navigation items will need. This will save us from writing duplicate rules for each tab. Then we'll add a separate rule for each list item id, giving the <li> its own background-image and width—the only two variables that will be different for each tab.

The CSS goes something like this:

 #nav {   margin: 0;   padding: 0;   height: 20px;   list-style: none;   display: inline;   overflow: hidden;   } #nav li {   margin: 0;   padding: 0;   list-style: none;   display: inline;   } #nav a {   float: left;   padding: 20px 0 0 0;   overflow: hidden;   height: 0px !important;   height /**/:20px; /* for IE5/Win only */   } #nav a:hover {   background-position: 0 -20px;   } #nav a:active, #nav a.selected {   background-position: 0 -40px;   } 

The preceding code essentially turns off padding and list styles, makes the list horizontal, and hides the text that's between each hyperlink in the list. Notice the :hover and :active rules. These are generic for every <a> element within #nav so that we don't have to repeat those particular rules for each item.

I've also assigned a "selected" class to a tab that I wish to highlight permanently, signifying which section of the site you're currently on. This is shared with the :active state.

You may also notice that list-style: none; and display: inline; are repeated in both the #nav and #nav li selectors. This was to keep IE5/Windows happy. In a perfect world, declaring this once for #nav would be perfectly sufficient. That's not the case, of course.

Next, we'll add the rule for each id and assign its background-image and width. Here's one example:

 #thome a {   width: 40px;   background: url(home.gif) top left no-repeat;   } 

There is, of course, a similar declaration for each tab needed.

The Results

Figure 14-13 shows the resulting tabs in normal, hover, and selected states. To see it all working in action, check out the working example with source code on SimpleBits (www.simplebits.com/bits/tab_rollovers.html).

click to expand
Figure 14-13: Resulting tabbed navigation with each of the three states demonstrated

Why Use It?

  • It's lightweight: Just an unordered list in the markup.

  • It's accessible: Using Stuart's method, we can ensure screen readers will read the text links.

  • No JavaScript: We don't need to preload or create multiple images for each state. We also don't need extra JavaScript to control hover effects. Thanks, Pixy.

  • It's stylized: Fitting hypertext into defined areas can be tricky; this allows for using stylized images.

But Wait, the Text Doesn't Scale!

Following a great suggestion from Douglas Bowman, and in response to legibility issues and the inability to resize image text, I went a step further and created a second set of tab images with larger text labels. I could then override rules on the existing "medium" and "large" alternate style sheets. The alternate styles are activated using Paul Sowden's style sheet switcher, which I talked about back in the "Extra credit" section of Chapter 10.

An example of the overridden rule looks almost identical to the original, with a new width and image path:

 #thome a {   width: 46px;   background: url(guides_lg.gif) top left no-repeat;   } 

Figure 14-14 shows the larger tabs as they appeared on the Fast Company site, where you'll notice that the horizontal spacing is tighter, while the vertical size remains the same as the original. But, by adding the ability to increase the size of hypertext as well as the tab images, we've helped out low-vision users, while still working with our particular design constraints.

click to expand
Figure 14-14: Tab navigation with larger image set activated from an alternate style sheet



 < Day Day Up > 



Web Standards Solutions. The Markup and Style Handbook
Web Standards Solutions: The Markup and Style Handbook (Pioneering Series)
ISBN: 1590593812
EAN: 2147483647
Year: 2003
Pages: 119
Authors: Dan Cederholm

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net