Accessible Header Images With CSS And XHTML

Sizing the Header

This is the easy bit -- just set the height and width. This can change from one header to another, so we'll use the header's ID.

<h1 id="album">My photo album</h1>  
#album { width: 300px; height: 75px; }

Remember: Use a number, set a unit. Images are set in pixels, so we will size our header in pixels (px), too.

Displaying the Image

We'll use the background property for this: it has good browser support and involves simple code.

<h1 id="album">My photo album</h1>  
#album {  
 width: 300px; height: 75px;  
 background-image: url(header.gif);  
 background-repeat: no-repeat;  
}

Now the image looks like this:

Hiding the Text

This is the make or break step. We have to hide the text, but have it still be accessible.

The original FIR technique removed the text from the page totally, using display: none. This failed the accessibility test:

• screen readers couldn't “see" the text (no more access for blind visitors),
• with images off, there is no content at all (so we lose many dialup visitors).

Mike Rundle found a smart solution to the first problem: don't remove the text; just slide it out the side.

Mike used the text-indent property, but with a negative value. He effectively out-dented the header right off the page.
His code looked something like this:

h1 { text-indent: -100em; }

Notice the value is in ems: they change with the size of the text. If the browser uses larger fonts, the header will move further away. It will never get back onto the page.

There's just one problem. What about the second point? What happens if images are turned off?

We're no better off than we were with FIR: an empty box. Time for a new method.

Show us Your Text!

It's ironic that after finally finding a way to remove text, we go right ahead and try to get it back.

For that, we have to put the text not outside the window, but under the graphic. Here's a picture of what we want: header image on top, text below:

Because the background image would be behind the text, we can't set it on the header tag itself. Time to make a sacrifice for users on slow connections: we need an extra span.

Here's the new XHTML:

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

All we have to do is what we did before, except when it comes to the span. To set a height and width on the span, we also have to set its display: block property.

A negative margin-bottom will move the text upwards, but in most browsers this will make the text appear on top of the span. We need to set a z-index on the span to position it above the text.

I like pictures, so here's another one. This time I've added a green border and a small negative margin-bottom to the span:

Here's the code that puts the text completely underneath the span:

/* repeated code per header */  
#album, #album span {  
 width: 300px; height: 75px;  
 background-image: url(header.gif);  
 background-repeat: no-repeat;  
}  
 /* This is what moves the text under the span */  
#album span { margin-bottom: -75px; }  
/* code for all styled headers */  
h1 span {  
 display: block;  
 /* place the span on top */  
 position: relative;  
 z-index: 1;  
}