Image Replacement Tests

Notes

To simplify testing of copy/paste and screen readers, the text in the markup of each heading is a brief descriptive of the method used. In normal use of IR methods, just as with alt text, the replaced text should be the same as provided in the image. I also created linked versions of each of the methods..this was a PITA, but most of the methods work back to IE5.01/win (validity note: cursor:hand was needed. If you don't need it, drop it). I included the methods of Mike Rundle and Seamus Leahy as they require no SPAN elements, but, just like the original Fahrner IR, these also hide text in different ways.

Results

My initial testing [1] seems to conclude that Levin's IR method is still the best choice for three reasons: 1) it allows sighted users to browse with images off. 2) it works in most modern browsers. 3) it's fairly straightforward to make the heading also a link. Moose's CSS 2.1 IR technique essentially creates the SPAN in Levin's method using generated content, but this is only currently reliable in Opera7 and Safari 1.2.

Although the text in Levin's simple test case of Andrew's IR method appears to be visible with images off, in a more complex page with nested elements, the use of z-index either places the element too deep to be visible, or, upon adding position:relative; z-index:2; to the heading as Levin suggested, puts the text on top in all browsers I tested besides Gecko.

1. tested on winXP: Opera7.2, IE5.01 - IE6, Mozilla1.6, Firebird 0.6

wd.mrclay.org (coming soon) | 2/29/04.