Revised Image Replacement
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.
2008 Update: what does Google think of these methods?
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.
code:
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.
code:
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.
Revised Image Replacement
code:
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.
Revised Image Replacement
code:
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.
Revised Image Replacement
code:
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.
Revised Image Replacement
code:
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.
code:
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)
Revised Image Replacement
Revised Image Replacement
code:
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.
Revised Image Replacement
code:
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. (This technique uses the Leahy/Langridge technique as a base, and only adds the title attribute)
Revised Image Replacement
code:
