SIR Image Replacement

July 10th, 2006

CSS techniques for replacing text with an image have been around for a few years, allowing web designers greater options for styling text on a page. Early approaches turned out not to work as expected with Screen Readers, making the text less accessible than normal. In response, a variety of different approaches have been suggested—many involving extra tags, lengthy CSS, or both.

Here’s my suggestion for an Image Replacement technique that’s accessibe, requires no additional HTML tags, and uses a tiny amount of CSS.

SIR Image Replacement

HTML

<h2 id="sir">SIR Image Replacement</h2>

CSS

#sir:after {
content:url(sir.gif);
margin-top:-1em;
display:block;
}

The Good News

  • No additional HTML tags are required

  • It doesn’t use display:none or display:hidden—so your page should remain accessible to screen readers and search engines

  • The HTML text is displayed when CSS is turned on, but images are turned off

  • No height and width requirements for your images

The Bad News

  • You need to be careful that your image text properly covers your HTML text.

  • Internet Explorer doesn’t normally support the :after pseudo-element.

Well, the first point is manageable, but for most web designers no IE support means this technique isn’t very useful for most projects. But I did say it doesn’t normally support :after. That means we’ve got a way of making it work. Dean Edwards has produced a great JavaScript library that makes IE behave like a (more) standards-compliant browser. His IE7 script (not to be confused with the new IE7 browser) adds support a wide range of CSS selectors, properties, as well as fixing a number of browser quirks. Even if you’re not planning on using this Image Replacement technique, Dean’s IE7 script is still worth checking out!

If you don’t want to use the JavaScript solution for Internet Explorer, this technique will only work with browsers with improved CSS support like Firefox, Flock, Camino, Safari, as well as other Webkit browsers (eg. Linux). You might still find this a useful technique for delivering enhanced versions of your pages to users with newer browsers, and a more simple version to those with IE. Otherwise, this might be a technique you’ll see in wider use in a few years… when Internet Explorer starts supporting more CSS.

Discuss the article