Classic FIR

Using Doug Bowman's original tutorial, we surround the text with empty spans to hide it with display: none; Issues: most screen readers will not pick up the text when it is not rendered on-screen, nothing shows up under "images off, css on" scenarios, semantically meaningless <span>s necessary.

 <h3 id="header">
    <span>Revised Image Replacement</span>
</h3>

/* css */
#header {
    width: 329px;
    height: 25px;
    background-image: url(sample-opaque.gif);
    }
#header span {
    display: none;
    }

Single-pixel <img> Replacement

Radu Darvas proposed adding a one-pixel, transparent GIF image to the header to restore alt text. Issues: an extra meaningless element is added to the page.

<h3 id="header">
    <img src="shim.gif" alt="Revised Image Replacement" />
    <span>Revised Image Replacement</span>
</h3>

/* css */
#header {
    width: 329px;
    height: 25px;
    background-image: url(sample-opaque.gif);
    }
#header span {
    display: none;
    }

Radu Method

Radu has also conceived a method involving margin positioning to hide the text. Similar in theory to the Phark Method below, Radu's method works in IE5. Issues: doesn't solve css on/images off problem.

<h3 id="header">
    Revised Image Replacement
</h3>

/* css */
#header {
    background: url(sample-opaque.gif) no-repeat top right;
    width: 2329px;
    height: 25px;
    margin: 0 0 0 -2000px;
    }

Leahy/Langridge Method

Seamu s Leahy and Stuart Langridge independently discovered a method which allows dropping of the span and, theoretically (although this isn't confirmed) restores accessibility thanks to overflow: hidden; — Issues: nothing shows up under "images off, css on" scenarios, box model hack required to work in IE5.

<h3 id="header">
    Revised Image Replacement
</h3>

/* css */
#header {
    padding: 25px 0 0 0;
    overflow: hidden;
    background-image: url(sample-opaque.gif);
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:25px;
    }

Phark Method

Greatly simplifying Leahy/Langridge, Mike Rundle of Phark offered a solution that uses text-indent to hide the text. This is confirmed to work in JAWS, solving the accessibility problem. Issues: nothing shows up under "images off, css on" scenarios, doesn't work in IE5.

<h3 id="header">
    Revised Image Replacement
</h3>

/* css */
#header {
    text-indent: -100em;
    overflow: hidden;
    background: url(sample-opaque.gif);
    height: 25px;
    }

Phark Revisited

Further probing has revealed weaknesses with the previous one, revolving around scrollbars in Safari, and breakage in IE5. Issues: doesn't solve images off/css on.

<h3 id="header">
    Revised Image Replacement
</h3>

/* css */
#header {
    text-indent: -5000px;
    background: url(sample-opaque.gif);
    height: 25px;
    }

Dwyer Method

From Leon Dwyer comes a twist on Classic FIR. Works in seemingly everything known at the present time, including screenreaders. Issues: doesn't solve images off/css on, still requires extra span.

<h3 id="header">
    <span>Revised Image Replacement</span>
</h3>

/* css */
#header {
    width: 329px;
    height: 25px;
    background-image: url(sample-opaque.gif);
    }
#header span {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    }

Gilder/Levin Method

Tom Gilder and Levin Alexander proposed a further variation that theoretically fixes the accessibility problems (verification needed, but it's almost assured this works in JAWS et. al), and allows the text to show up even if images are turned off. Issues: extra empty span, transparent images don't hide text.

(note: header duplicated to illustrate transparency problem)

<h3 id="header">
    <span></span>Revised Image Replacement
</h3>

/* css */
#header {
    width: 329px;
    height: 25px;
    position: relative;
    }
#header span {
    background: url(sample-opaque.gif) no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    }

Lindsay Method

Russ Weakley writes that by setting your fonts to a tiny, 1px size and matching fore- and background-colours, you don't even need to hide the text. Issues: doesn't solve images off/CSS on, doesn't work on anything but flat-colour backgrounds.

<h3 id="header">
    Revised Image Replacement
</h3>

/* css */
#header {
    background: url(sample-opaque.gif) no-repeat;
    width: 329px;
    height: 25px;
    font-size: 1px;
    color: #xxxxxx;
    }

Shea Enhancement

And finally, no matter which method you use, you end up losing alt text tooltips on hover that you and your users might be used to seeing on images. Technically, you shouldn't rely on this anyway, since title is far more appropriate for tool-tips. So by adding a title back to your header, you can restore these little hover effects to your site. (This technique uses the Leahy/Langridge technique as a base, and only adds the title attribute)

<h3 id="header" title="Revised Image Replacement">
    <span></span>Revised Image Replacement
</h3>

/* css */
#header {
    width: 329px;
    height: 25px;
    position: relative;
    }
#header span {
    background: url(sample-opaque.gif) no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    }

Revised Image Replacement