Web Design in a Nutshell, 3rd Edition

The Original (FIR)

The image replacement technique that started it all is the Fahrner Image Replacement (FIR) technique created by Todd Fahrner and popularized by Doug Bowman. (See the original article at http://www.stopdesign.com/articles/replace_text/.) It is now discouraged from use due to serious drawbacks (noted later), but it is included here both for historical purposes and because it so clearly illustrates the basic concepts of image replacement.

In FIR, the content of an element is wrapped in a span that is used to hide the text, while a background image is applied to the element and appears in its place. The markup goes like this:

    <h1 id="header"><span>This is the headline.</span></h1>

The styles that hide the text and replace it with a background image are extremely straightforward.

    #header {background: url(headline.gif) top left no-repeat;
        width: 240;
        height: 20; }
    #header span { display: none; }

The fatal flaw of FIR is that, although the content of the h1 element is preserved in the source document, presumably ensuring its accessibility to all users and devices, it turns out that some screen readers will honor the display: none property and simply not read the element. So FIR fails the accessibility test (as tested and documented by accessibility specialist Joe Clark).

The other aspect of FIR that is generally frowned upon is that it requires the insertion of a meaningless span element into the source, which is considered to be “bad” markup.

Like most other IR techniques, ...