In modern web design, a technique known as "image replacement" is often used as a way to include richer, more stylized fonts than can normally be displayed in a browser. The technique, which is often used for headings, involves using CSS to hide the actual text and show a background image in its place.
From an accessibility standpoint, there are at least two goals that image replacement techniques should meet:
The following tests demonstrate several of the leading image replacement techniques:
The original image replacement technique uses display:none to hide the original text:
Uses position:absolute to move text off the visible part of the screen:
Original Text
Uses text-indent to move text off the visible part of the screen:
Original Text
Positions the background over the text using position:absolute. (Requires a non-transparent image):
Original Text
See more about image replacement techniques at: http://www.mezzoblue.com/tests/revised-image-replacement