Solving (almost) the alt tag problem with CSS backgrounds

[Tags: web design, css]. This article on using background-image to replace text may be a couple years old, but it's had all that time to be tested and updated accordingly. It's very useful if you really want to use images rather than text, but want screen readers to be able to read the images. Sadly, many screen readers don't play along with the Fahrner Image Replacement (FIR) method outlined, and so you're left with a series of alternatives listed at the end of the article as follows:

"Leahy/Langridge Image Replacement (LIR)

This method eliminates the span by setting height of the parent element to 0 and overflow to hidden, which hides the text. Then it uses top padding to force the element to the height of the image in the background. Conceived at similar times by Seamus Leahy and Stuart Langridge.

"Rundle’s Text-Indent Method

Mike Rundle devised a simple method of using the CSS text-indent property to shift contained text outside the visible element window.

"Cover-up Method

Another method devised by both Petr Stanicek (a.k.a. “Pixy”) and Tom Gilder uses an empty span element to position a background image on top of the text, allowing the text to show up when images are turned off (or don’t load) in the browser.

"For further reading on the subject of FIR, refer to the previously mentioned article, Facts and Opinion About Fahrner Image Replacement, and Dave Shea’s In Defense of Fahrner Image Replacement at Digital Web."