Image Replacement Test

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:

Test 1: FIR (Fahrner Image Replacement)

The original image replacement technique uses display:none to hide the original text:

Original Text

Test 2: Position Offscreen

Uses position:absolute to move text off the visible part of the screen:

Original Text

Test 3: Phark Method

Uses text-indent to move text off the visible part of the screen:

Original Text

Test 4: Gilder/Levin Method

Positions the background over the text using position:absolute. (Requires a non-transparent image):

Original Text


Results

See more about image replacement techniques at: http://www.mezzoblue.com/tests/revised-image-replacement

Accessibility Tests