CSS techniques for replacing text with an image have been around for a few years, allowing web designers greater options for styling text on a page. Early approaches turned out not to work as expected with Screen Readers, making the text less accessible than normal. In response, a variety of different approaches have been suggested — many involving extra span tags, lengthy CSS, or both.
Here’s my suggestion for an Image Replacement technique that’s accessibe, requires no additional HTML tags, and uses a tiny amount of CSS.