Choose an accessible image replacement method

The technique of using CSS to replace normal HTML text, mostly for headings, with a background image in order to achieve a particular look has been talked about many, many times since early 2003.

Several different image replacement methods have been proposed, each with their pros and cons. Some methods create accessibility problems, while others place restrictions on the type of image you can use or force you to use extraneous markup. No method that I am aware of is perfect.

What surprises me a little is that I still see people using image-based techniques that do not work at all for people browsing with images off. One of the tests I perform when checking sites for accessibility and universality is to simply turn off images in my web browser. In some cases that makes text disappear because an image replacement has been used that does not account for people with CSS on and images off.

In most cases you can and should use an image replacement method that avoids that problem. On the few occasions when I need image replacement I turn to either the Gilder/Levin Method as described by Dave Shea or, if the replaced text is linked and CSS support for IE/Mac is required, the Gilder Levin Ryznar Jacoubsen IR method.

A drawback that both methods share is that they require adding an empty inline element to the markup, but that’s a small price to pay for making the text available to everybody. Another drawback they have in common is that they don’t work well with partially transparent images, so if you have to use transparency you’ll need to decide whether to adjust the design or hide the replaced text from people with images off.

In the end it’s your call, but I hope this has at least made you aware of one problem image replacement can cause as well as a couple of methods that eliminate it.

Posted on December 3, 2007 in CSS