Image Replacement Techniques
Introduction
This article discusses different methods of image replacement that is needed to maintain semantic markup and a true separation between content and style.
The Problem
There was no need for special image replacement techniques before the introduction of CSS,
as web developers used the Alternative Text, alt, in the <img> tag to provide the
appropriate information. If the image is missing or the user has images disabled, the alt content is displayed.
In the pure HTML example below,
the image is missing. The browser would display the information that is contained in the alt attribute.
The actual style of the alt text depends on the browser. In Mozilla Firefox just plain text is shown, in Opera
this text has a border around it, and in Internet Explorer a red cross is also shown to indicate a broken image.
<img src="path/to/image.png" alt="A Sail Boat on a Lake">
CSS gives a web developer better control over the presentation of their HTML mark-up. There are a few grey areas concerning what is and what isn't classed as presentational, especially regarding the use of header images.
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
Presentational elements such as non-content specific graphics, should be placed within the CSS. Presentational CSS, which gives the site a branded design, can then be removed without too much impact on content of the site. However, if background images are used for the title or sub headings, then there is no substitute and the information is completely lost.
The Solutions
There has been a lot of hype of potential solutions to this problem, however none so far are perfect. The main use of these
techniques are to replace the branded text, such as a company logo, that is embedded within an image. Semantic mark-up
denotes the use of a top-level heading for this type of information, therefore the HTML
element h1 should be used.
There are numerous advantages and disadvantages to each of the solutions documented below.
Fahrner Image Replacement
This was the first IR technique to be devised and was named after Todd Fahrner, one of the founding conceptualists in image replacement techniques. It is now often refered to as the FIR technique, the abbreviation of ‘Fahrner Image Replacement’ and is used to talk about the general subject of IR. The principal for this technique is creating pure HTML text representation of the image, then hiding the text when the style sheet is enabled.
The FIR technique uses the following HTML mark-up.
<h1><span>Microsoft</span></h1>h1
{
background: url("hello_world.gif") no-repeat;
height: 35px;
}
span
{
display: none;
}
Further Reading & Resources
Below are resources I used for this article and would be interesting further reading on the subject.
- Facts and Opinion About Fahrner Image Replacement
-
Development of the Fahrner Image Replacement technique and its analogues is moving faster than the destruction of the Berlin Wall. This article provides some much-needed empirical data on how FIR actually works in screen readers.
- Using Background-Image to Replace Text
-
In principle, the concept is very simple. We write a short string of text and surround it with two sets of basic HTML tags. Then we use CSS to hide the HTML text and display a background image containing the exact same words instead of the original text. That's it. Replacing text with an image is no more complicated than this.
- Revised Image Replacement
-
Plenty of new and interesting revisions to the original Fahrner Image Replacement technique sprouted up in late 2003. This is an attempt to consolidate them, so that perhaps we can decide on the official replacement.
- Accessible Image Replacement
-
Either way, we all know by now that using
display: none;is out. We haven't got this problem totally licked yet, but we're two thirds of the way there. Not bad for a technique that has been in the public eye for only 9 months now.
- Flaw with Using Background-Image to Replace Text
-
If anyone read the CSS tutorial I wrote last week involving use of the
background-imageproperty, they should be aware of an apparent critical flaw in the method as it's currently described. It's hard to tell whether the flaw is in the method itself, or simply in the way screen readers verbalize text of a page.
- Image Replacement Decision Grid
A table documenting different IR techniques. It compares each of the seven IR techniques with different CSS and image combinations. It also documents support by screenreaders.