Replacing Headers with Images

Fahrner's Image Replacement (or FIR) is an extremely popular and equally controversial technique for replacing text with a graphic image of that text. It is one of the principal techniques used at the CSS Zen Garden, that hotbed of avant-garde CSS, but is criticized on accessibility grounds.

To replace a header with images:

1.	In the CSS document, set the background property of the header (h1 in the example) to the desired image.
2.	Set the height of the header to the height of the image.
3.	Hide the text in the span element by using h1 span {display:none}.
4.	Save the CSS document with the .css extension.
5.	In the head section of your (X)HTML document type <style type="text/css"> to begin the internal style sheet.
6.	Type @import "sheet.css" screen;, where sheet.css is the CSS file that you created in steps 14 and that will be used only for formatting your page in computer browsers, not in print or in handheld browsers.
7.	Import or create any other formatting that should be applied to the screen, print, or handheld versions of your page.
8.	Create your header in the desired location in the (X)HTML by typing <h1>.
9.	Enclose the header text with a span element by typing <span>header</span>.
10.	Complete the header with </h1>.

Figure 12.16. The CSS code for image replacement should go in an external style sheet.

Figure 12.17. It's a good idea to import, rather than link CSS files that use the FIR technique to help keep screen readers and mobile browsers from using those styles.

Tips

• I describe image replacement here because I think it's important to understand the basic concept. Perhaps it will evolve to overcome the obstacles that keep it from complete acceptance.

• One of the advantages of FIR is that because the header text does exist, search engines will see it in the source code, even though your visitors will not.

• One problem with image replacement is that screen readers like JAWS sometimes can't read the spanned text. Importing the CSS for screen only (which translates to computer browsers, not screen readers) helps solve that problem.

• A second problem arises if a visitor uses a browser that does not support CSS (perhaps a mobile browser) and has images turned off. In that case, they will see neither the image nor the text it was meant to replace.

• There are a number of additional image replacement techniques that have attempted to solve the accessibility issues. Some are discussed by Dave Shea in his article defending FIR, http://www.digital-web.com/articles/in_defense_of_fahrner_image_replacement/ and in his and Molly Holzschlag's book, The Zen of CSS Design, whose signature Web site relies heavily on image replacement. Another source of alternative techniques is the original article by Douglas Bowman popularizing FIR: http://www.stopdesign.com/articles/replace_text/, in particular the notes at the end. Finally, you may also want to read Joe Clark's criticisms of FIR at A List Apart, http://www.alistapart.com/articles/fir for the other side of the argument.

Figure 12.18. The H1 element is replaced by the Farm Training Podcasts logo.