Why It s Not Bulletproof

Why It's Not Bulletproof

So what's wrong here? We're not looking to scorn the designers of LanceArmstrong.comthe method used here mirrors those used on millions of sites all over the Web. We're simply using this site as a guide, primarily because I think it's visually compelling, but also because re-creating such a site using CSS and valid, accessible markup will be simple. That said, let's outline the characteristics that make this site -vulnerable.

MOUNTAINS OF CODE

Certainly a characteristic that plagues sites that use JavaScript and image-based navigation is the large amount of code that's required to lay them out and make them dynamic (in other words, switch states on rollover). Commonly, each tab is sliced out as its own image, with the current version using a series of nested tables, spacer GIF shims (transparent images used only for providing space between page elements), and other nonessential markup to achieve its pixel-precise layout. The result is a whole heck of a lot of codeand that means potentially slow download times and increased file size.

For LanceArmstrong.com in particular, all four tabs are contained within a single graphic, with an image map applied to make each tab portion of the graphic clickable. This requires less code than if each tab were a separate image and then positioned in table cells with spacer GIF shims. But the problems that follow are shared by both methods.

INACCESSIBILITY ISSUES

Another unfortunate side effect of using so much code is that it chokes the text browsers and assistive software used by visitors with disabilities. And because the entire navigation is one single image (looking back at Figure 2.3), most developers fail to specify alt attributes for each clickable area when using image maps. So, users browsing with screen readers, or those who turn off images to save download time (a common practice for users with slow connections), will have a tough time navigating the site.

SCALABILITY ISSUES

This is a big one. Because the tabs are images, there's no way for visually impaired users to bump up the text size in their browsers to increase readability. Image-based navigation just won't budge when it needs to.

LACK OF FLEXIBILITY

If, in the future, the editors of LanceArmstrong.com wished to change any of the tab wording, or perhaps replace "About Lance" with "Why Lance Rules," they would have a challenge ahead of them. Editing, removing, or swapping the wording on any of these image-based tabs requires the slicing out of new images, potentially altering the dimensions specified in the markup by way of the image map and thus creating a lot of work for all those involved.

And because the tab set is one single image, it means the update of at least four images to make a single change (one for each tab state)certainly a potential headache down the road.

As you can see, there's plenty of room for improvement here, and depending on your priorities, any one of the downsides mentioned earlier could be reason enough to investigate an alternate method. So let's do just that.