Fahrner image replacement (abbreviated FIR ) is a Web design technique that uses a new style of text. It is intended to keep the page accessible to users of screen readers , text-only web browsers , or other browsers where support for images or style sheets is not available, while allowing the image to differ between styles. FIR is named for Todd Fahrner, one of the persons originally credited with the idea of ​​image replacement. [1]

Motivation

The typical method of inserting an image in an HTML document is via the <img>tag. This method has its drawbacks with regards to accessibility and flexibility, however:

  • While the altattribute is designed to provide a textual representation of the content image, this precludes the use of HTML in the textual representation and causes problems example needed ] with some search robots.
  • Using the <img>tag to show text is presentational; Many Web designers argue that this topic should be separated from a CSS style sheet.
  • Images referenced using an <img>tag can not be changed easily via CSS, causing problems with alternative stylesheets.

Fahrner image replacement was devised to rectify these issues.

Implementations

The original FIR implementation [1] Described by Douglas Bowman used was heading, inside of qui Was a <span>element Containing the text of the heading:

< h3 id = "firHeader" > < span > Sample Headline </ span > </ h3 >

Through style sheets, the heading Was Then Given a background Containing the Desired image and the <span>hidden icts by setting displayCSS property to none:

# firHeader
{
 width : 300 px ;
 height : 50 px ;
 background : #fff url ( firHeader.gif ) top left no-repeat ;
}
# firHeader span
{
 display : none ;
}

It was soon Discovered, HOWEVER, That this method Caused Some screen readers to skip over the heading Entirely, As They Would not read any text That Had a displayproperty of none. The later Phark method , developed by Mike Rundle , instead of using the text-indentproperty of the image,

# firHeader
{
 width : 300 px ;
 height : 50 px ;
 text-indent : -5000 px ; / * ← Phark * /
}

The Phark method had its own problems, however; in visual browsers where CSS was on but images off, nothing would display.

Dave Shea ‘s eponymous Shea method solves Both of the issues MENTIONED Earlier, at the cost of an extra <span>:

< h3 id = "header" > < span > </ span > Revised Image Replacement </ h3 >

By absolutely positioning an empty <span>text element, the text is effectively hidden. If the image fails to load, the text behind it is still displayed. For this reason, images with transparency can not be used with the Shea method.

# header
{
 width : 329 px ;
 height : 25 px ;
 position : relative ;
}
# header span
{
 background : url ( firHeader.gif ) no-repeat ;
 position : absolute ;
 width : 100 % ;
 height : 100 % ;
}

References

  1. ^ Jump up to:b Bowman, Douglas (2003-03-07). “Using background image to replace text” . Stopdesign . Retrieved 2011-04-05 .