Summary

---

We've looked closely at three popular image replacement methods, starting with the original Fahrner Image Replacement and two of its successors. While none of the three are perfect solutions, techniques such as Mike Rundle's are pretty darn close, and may have applications in the real world, as long as the pitfalls and drawbacks aren't taken lightly.

Let's break down the main differences between the three methods presented:

Method A:

• Requires meaningless extra <span> element.

• Screen-reader software in common use at the time of this writing will speak nothing due to acknowledging the display property (based on Joe Clark's findings).

• Nothing will appear in an "images off/CSS on" scenario.

Method B:

• Doesn't require additional markup.

• Screen-reader software should read the text normally.

• Box Model Hack is necessary for IE5/Windows.

• Nothing will appear in an "images off/CSS on" scenario.

Method C:

• Doesn't require additional markup.

• Screen-reader software should read the text normally.

• Nothing will appear in an "images off/CSS on" scenario.

All of the current popular methods share that last drawback—but as more developers continue to discover new ways of handling image replacement techniques, I'm confident we'll eventually have a solution that everyone can be happy with.

Until then, there are a couple of practical applications for the general idea of image replacement, and we'll take a look at two of them in the "Extra credit" section of this chapter.

It's important to mention that standards-compliant designer Dave Shea has been extensively monitoring the state of image replacement, and has been keeping a nicely organized page that covers all of the methods presented in this chapter and more. Be sure to keep an eye on Dave's "Revised Image Replacement" (www.mezzoblue.com/tests/revised-image-replacement/).

---