Office-it.orG

Plenty of new and interesting revisions to the original Fahrner Image Replacement technique sprouted up in late 2003. This was an attempt to consolidate them. Please note that this page is no longer being maintained.

Requirements: the replacement must solve the screen reader problem, and it must address the “images off, css on” problem. It is also hoped that a solution will be found that reduces the need for empty <span> elements. The successful technique must work in browsers back to 5.x, but as of the time of writing none of these appear to fail so browser support matrices will be spared.

The two most promising techniques, Phark and Gilder/Levin are available on a reduced page for screenreader testing.

Classic FIR

Using Doug Bowman’s original tutorial, we surround the text with empty spans to hide it with display: none;
Issues: most screen readers will not pick up the text when it is not rendered on-screen, nothing shows up under “images off, css on” scenarios, semantically meaningless <span>s necessary.

HTML code:

    Revised Image Replacement

CSS code:

/* css */
#header {
	width: 329px;
	height: 25px;
	background-image: url(sample-opaque.gif);
	}
#header span {
	display: none;
	}

Single-pixel <img> Replacement

Radu Darvas proposed adding a one-pixel, transparent GIF image to the header to restore alt text.
Issues: an extra meaningless element is added to the page.

HTML code:

  Revised Image Replacement

CSS code:

/* css */
#header {
	width: 329px;
	height: 25px;
	background-image: url(sample-opaque.gif);
	}
#header span {
	display: none;
	}

Radu Method

Radu has also conceived a method involving margin positioning to hide the text. Similar in theory to the Phark Method below, Radu’s method works in IE5.
Issues: doesn’t solve css on/images off problem.

HTML code:

 Revised Image Replacement

CSS code:

/* css */
#header {
	background: url(sample-opaque.gif) no-repeat top right;
	width: 2329px;
	height: 25px;
	margin: 0 0 0 -2000px;
	}

Leahy/Langridge Method

Seamus Leahy and Stuart Langridge independently discovered a method which allows dropping of the span and, theoretically (although this isn’t confirmed) restores accessibility thanks to overflow: hidden;
Issues: nothing shows up under “images off, css on” scenarios, box model hack required to work in IE5.

HTML code:

 Revised Image Replacement

CSS code:

/* css */
#header {
	padding: 25px 0 0 0;
	overflow: hidden;
	background-image: url(sample-opaque.gif);
	background-repeat: no-repeat;
	height: 0px !important;
	height /**/:25px;
	}

Phark Method

Greatly simplifying Leahy/Langridge, Mike Rundle of Phark offered a solution that uses text-indent to hide the text. This is confirmed to work in JAWS, solving the accessibility problem.
Issues: nothing shows up under “images off, css on” scenarios, doesn’t work in IE5.
HTML code:

	Revised Image Replacement

CSS code:

/* css */
#header {
	text-indent: -100em;
	overflow: hidden;
	background: url(sample-opaque.gif);
	height: 25px;
	}

Phark Revisited

Further probing has revealed weaknesses with the previous one, revolving around scrollbars in Safari, and breakage in IE5.
Issues: doesn’t solve images off/css on.

HTML code:

	Revised Image Replacement

CSS code:

/* css */
#header {
	text-indent: -5000px;
	background: url(sample-opaque.gif);
	height: 25px;
	}

Dwyer Method

From Leon Dwyer comes a twist on Classic FIR. Works in seemingly everything known at the present time, including screenreaders.
Issues: doesn’t solve images off/css on, still requires extra span.

HTML code:

	Revised Image Replacement

CSS code:

/* css */
#header {
	width: 329px;
	height: 25px;
	background-image: url(sample-opaque.gif);
	}
#header span {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
	}

Gilder/Levin Method

Tom Gilder and Levin Alexander proposed a further variation that theoretically fixes the accessibility problems (verification needed, but it’s almost assured this works in JAWS et. al), and allows the text to show up even if images are turned off.
Issues: extra empty span, transparent images don’t hide text.

(note: header duplicated to illustrate transparency problem)

HTML code:

	Revised Image Replacement

CSS code:

/* css */
#header {
	width: 329px;
	height: 25px;
	position: relative;
	}
#header span {
	background: url(sample-opaque.gif) no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
	}

Lindsay Method

Russ Weakley writes that by setting your fonts to a tiny, 1px size and matching fore- and background-colours, you don’t even need to hide the text.
Issues: doesn’t solve images off/CSS on, doesn’t work on anything but flat-colour backgrounds.

HTML code:

	Revised Image Replacement

CSS code:

/* css */
#header {
	background: url(sample-opaque.gif) no-repeat;
	width: 329px;
	height: 25px;
	font-size: 1px;
	color: #xxxxxx;
	}

Shea Enhancement

And finally, no matter which method you use, you end up losing alt text tooltips on hover that you and your users might be used to seeing on images. Technically, you shouldn’t rely on this anyway, since title is far more appropriate for tool-tips. So by adding a title back to your header, you can restore these little hover effects to your site.

HTML code:

	Revised Image Replacement

CSS code:

/* css */
#header {
	width: 329px;
	height: 25px;
	position: relative;
	}
#header span {
	background: url(sample-opaque.gif) no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
	}

Source: http://www.mezzoblue.com/tests/revised-image-replacement/

Popularity: 3% [?]