Using Image as Replacement for Text : The FIR Method

Jul 102007

published by Dan in Accessibility | Website Design with 2 Comments

(This is the second in a series of post discussing Images as replacement for text to make use of beautiful fonts without sacrificing the accessibility of your site)

Douglas Bowman has created an excellent tutorial on this using a method called Fahrner Image Replacement (FIR). FIR is is named as such as a credit to Ted Fahrner, being the one who thought of the idea. The FIR method is one of the most common image replacement techniques but it has one flaw (which we will discuss later) that affects accessibility to screen readers. To implement this image replacement technique, you enclose the text to be replaced in two tags: the outer containment depends solely on your semantic needs, and the second (inner) one is a span.
See below:

<h1 id="FIRreplace">

<span>Text to be Replaced</span>

<h1>

Take note that I added a “FIRreplace” id to this particular h1 container.

Then in your CSS you should put the following styles:

h1 #FIRreplace {

    background-image:url("image_replacement.gif")

    background-repeat:no-repeat;

    height:30px

h1 #FIRreplace span {

    display:none

This has an effect of hiding your text (because of the style for the span) and replacing it with your appropriate image (image_replacement.gif) using the outer container.

Although this style works in most browsers, this fails in screen readers because of the display:none part for the span tag. Next post I will discuss other methods of image replacements for text that tries to address this flaw of the FIR method.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.