The way to provide “alternative” text for those users without images enabled is to leave
the HTML text where it is, but physically hide it using an image. So, instead of moving
the text itself, we cover it up with the image we’re using to replace it. The image will appear to those users who have images enabled, while the text will display for those
who don’t.
This technique requires us to use a small amount of additional markup inside the h1:
additional-markup.html (excerpt)
Going to the snow!
The extra span inside the h1 gives us an element to which we can apply a background
image to cover up the HTML text.
We do this by positioning the span absolutely:
additional-markup.css (excerpt)
h1 {
position: relative;
width: 389px;
height: 43px;
overflow: hidden;
}
h1 span {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url(images/title_snow.gif);
background-repeat: no-repeat;
}
Positioning the span absolutely moves it from the document flow, so the text of the h1 will
naturally flow underneath it. Once the background-image has been moved onto this span, the
span will cover up the h1’s text.
The h1 is positioned relatively because any absolutely positioned elements nested inside a
relatively positioned element will base their origin coordinates on the relatively positioned
parent. Consequently, when the span’s left position is set to 0 and top position to 0 it will
position itself at the top left of the h1, instead of relative to the entire page.
In addition to changing the h1’s position, we explicitly set its height and width, and set
overflow to hidden. The HTML text remains in its normal position, so if the text grows
beyond the dimensions of the image, it will begin to peek out from behind the image. To prevent this problem we make the h1 exactly the same size as the image, and use overflow:
hidden to cut off any text that exceeds the boundaries of the h1.
Also, the span must be the same size as the image if all of the image is to be displayed; we set
the height and width of the span to 100% so that it will automatically expand to the size of the
h1. We could explicitly set its size in pixels, but, using the technique I’ve shown here, we only
have to enter the exact pixel size on the h1—it’s always nice to save time on maintenance!
This method produces exactly the same result as the text-indent image replacement
technique. The only difference, which you can see in Figure 1.9, is that if the image is
turned off, users will still see relevant text there to tell them what the title’s meant to be.
This text can be styled normally, as it would if we were using plain HTML headings:
h1 {
position: relative;
width: 389px;
height: 43px;
overflow: hidden;
font-size: 175%;
line-height: 43px;
text-transform: uppercase;
}
The major disadvantage of this method is obvious—the additional markup. We’re
sacrificing semantic purity for accessibility and usability. It’s a sacrifice I normally make
willingly, to create a better experience for most users, but it’s good to know that there is a
“pure” markup solution if you need it. You’ll have to weigh up the options as they apply to
your own situation.
