Accessible Header Images With CSS And XHTML

Before CSS, images were always put into Web pages with image tags. We gave them alternate (alt) text so they still made sense when images were turned off—it was the only way.

Today, we have Cascading Style Sheets. Using CSS to add images to Web pages has been called a "vital cornerstone of all future Web design". It gives us new power to control the presentation not just of basic styles like borders, but all the images across a whole site.

Fahrner Image Replacement (FIR) was the first widespread method of doing this, and remains the most well known. But it isn't perfect. Today I'll show you two methods that overcome its problems. You can see the final code at the end of the article.

Before we begin, the first question we have to ask is: "Is this image part of the content?"

Images As Content

Imagine you have a photo album on your Website. Your visitor has come to your site to see those photos. The images must be the content.

For these sorts of images, we should still use the tried and tested image tag:

<img src="sunset.jpg" alt="The sunset burning red" title="Our first night" />

This is the perfect solution for content images because:

• with images turned on, everyone gets the photo: “sunset.jpg"
• with images off, the image's description is shown: "The sunset burning red"
• the image will print out like the rest of the textual content

But what if the image isn't part of the content?

For example, consider a decorative header. The content is the text in the header, not the image of that text.

This is where image replacement comes in.

Image Replacement

Image replacement is a simple idea: take a standard header tag (<h1>), hide its text, and show an image.

For these examples, this is the code I'll use:

<h1 id="album">My photo album</h1>

In an ideal world, this would be all the CSS3 you would need:

#album { content: url(header.gif), contents; }

With just one line, the content is replaced with an image. No image found? It shows the original content—the text. Perfect!

And then reality sets in… No browser supports CSS3.

The W3C is on the case. In a year or two we might see the first support for CSS3 in browsers.

Today, we've got to be creative.

The Technique

The bare header code does this:

To make the replacement, we have to do three things:

1. resize the header to fit the image
   
2. display the image
   
3. hide the text

Here is the image we'll use for the tutorial:

Right click and select "Save Picture As…" or "Save Image…" if you want to work through the techniques as we go. Call it " header.gif" (no quotes).