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() top left no-repeat; width:
headline.gif
; height:
240
; } #header span {
20
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, ...
Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.