Image Replacement :Accessibility , Findability and Beauty Converge

Image replacement is an essential staple in the Web designer/developer’s toolbox. The goal of image replacement is to present content as a graphic without sacrificing accessibility or search engine visibility. Graphical headings give a designer a wider rage of aesthetic possibilities than XHTML and CSS alone.

Since image replacement was introduced in 1999, a number of analogs have followed, the breadth of which can’t be fully discussed here. A nice catalog of the most popular techniques can be found at Dave Shea’s website (http://www.mezzoblue.com/tests/revised-image-replacement/)/ Shea himself provides a worthy option to the Phark method, which displays the heading text when images are disabled where Phark does not, making it more accessible but equally search engine friendly.

XHTML

<span></span>Revised Image Replacement</h3>

CSS

#header{

width:329px;

height:25px;

position:relative;

}

#header span{

background: url(sample-opaque.gif) no-repeat;

position: absolute;

width: 100%;

height:100%;

}

The Shea method scales the heading tag to the size of the image to be displayed then covers the text behind it with an opaque GIF. The drawbacks to the Shea method are the additional, empty <span> required within the heading tag to cover the text, and the slightly increased complexity of CSS required.

SIFR (or Scalable Inman Flash Replacement) is a related but quite different solution to accessibly displaying graphical text using Flash and Java Script rather than CSS. Initially , this may sound like an ironic option to choose to deliver content that can been seen by search engines, but because it only displays the styled text when Java Script and Flash support are detected, and graceful degrades to HTML text when not supported, it is a perfectly search engine friendly option. The general idea behind it is that as an HTML page loads, some Java Script searches the document for tags, classes and ids defined by the developer and overlaps them with a SWF file of the same size. The text of the original element is fed into SWF file where the Action Script dynamically draws your text in the font and to the typographic control over small portions of content, which is perfect under very specific design constraints . It does, however, providing detailed explanations, examples, a wiki, and a forum to get help if needed .

Regardless of which image replacement technique you opt for, be sure to avoid the old-school, original approach (called FIR or Fahner Image Replacement), which uses display:none to hide the heading text. Using display:none makes content inaccessible to screen readers, and can be mistaken by search engines as a dishonest, black hat SEO technique. Black hat techniques can cause your site to rank lower in search engines. Keep this in mind when styling any content on your pages!