Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


projects

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.

Revised Image Replacement

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.

Revised Image Replacement Revised Image Replacement

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.

Revised Image Replacement

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: