The aim of FIR was to provide a way ofmaintaining correct heading levels and text for those using text onlybrowsers, screen readers and also for search engines, where the actualheading was displayed as an image. However this technique has now beendeprecated by the community as it turned out to cause problems inscreen readers rendering the heading text inaccessible.

Thisarticle seeks to explain the problem with FIR and then go on to explainsome of the alternative techniques to achieve the same result that havesprung up - how they work and potential problems with them. This is nota beginner level tutorial and we will be handcoding CSS as thesolutions are easier to explain in the CSS than within Dreamweaver'sCSS Panel. I am assuming that readers of this tutorial understand thebasics behind CSS and are comfortable in working with a CSS style sheetin Code View within Dreamweaver or in another text or CSS editor (suchas Topstyle). I will be explaining the properties as we go along butassume that you understand the structure of a CSS document in order tofollow easily. The example document and stylesheet used to demonstratethe techniques is available as a code download.
Image Replacement

Theidea behind the various image replacement techniques is a good one,people using screen readers and other text only devices rely on thedocument structure ? using correct headings ? to understand thedocument. If you use an image in the place of a heading then even ifyou use the alt attribute to explain what the image says, it doesn'tmean a heading to the user who can't see the visual layout of thedocument where the heading is obviously a heading because of the design.

Additionally,search engines use headings to help them to index your site. If you areBob's Wonderful Widgets, and you expect your users to search for thephrase "pink widgets", having a heading on your site that reads, "PinkWidgets for sale" is going to rank you higher for the phrase "PinkWidgets" than if the phrase appears in paragraph text or in an altattribute. So, using correct headings can help your search engineplacement as well as assist those who cannot see the visual appearanceof your document.

Fahrner Image Replacement

TheFIR technique aimed to maintain the document structure for searchengines and screen readers by hiding the text heading with display:none; and displaying an image instead for CSS capable browsers. So, inthe mark-up we would put:

ACME Widgets Online

And in the CSS,

#logo {
background-image: url(images/banner.gif);
height: 38px;
width: 390px;
background-position: right;
}
#logo span {
display: none;
}

Thetechnique works by causing the text equivalent to display: none and thebackground image applied to the h1 with an id of logo to display. Itrelies on text only browsers not supporting any CSS at all and soignoring both the background image AND the display: none, and it isthis reliance that causes it to fail.

Read More