markwiens.net

There are many techniques for Image Replacement (IR) found on the shelf today. For awhile I just used the bottle with the text-indent code in it. That seemed to work for basic use, until I found ugly side-effects when mixing it with IE5/Mac. I must not have read the label carefully enough.

Also, for hiding text, such as the many “skippers” (skip navigation, skip to content, skip to my Lou, etc.), I used the technique employed over at A List Apart. Here is a snippet of their stylesheet:

.hide {
    height: 0;
    width: 0;
    overflow: hidden;
    position: absolute; /* for the benefit of IE5 Mac */
}

Unfortunately, I don’t see how the positioning benefits our friend IE5/Mac. And, naturally, there have been times when this technique has not worked. A temporary solution was to hide the text in IE5/Mac using display: none and using the above technique for all other browsers. But what about our friends with screen readers? Screen readers will not “see” anything that has the display: none applied.

Is There A Happy Ending?

While rummaging through sites, I came across some talk about hiding text, which led me to The Aural Text Class, from where this technique originated.

This technique is great for hiding text, yet keeping it visible for screen readers. I noticed that some text was still showing on larger monitors so I increased the amount of negative…ness on the left positioning.

.hide {
    position: absolute;
    left: -9999px;
    font-size: 0;
}

It can also be adapted for Image Replacement. I am sure someone else has come up with this idea so I won’t bother naming it the WIR (pronounced like the noise of a vaccuum). Well, anyway, here is my adaptation:

<h2 class="ir">
    <span class="hide">My header text</span>
</h2>

h2.ir {
    background-image: url("/imogen/cunningham.gif");
    height: 20px;
    width: 60px;
}

.hide {
    position: absolute;
    left: -9999px;
    font-size: 0;
}

Now come on. Get out there and tell your friends. I know you want to tell them all about the technique that sounds like a vaccuum cleaner.

Please note that this IR technique does not solve the problem of having images off and CSS on. But then again, when do most people use those settings on their browser?