Abstract Sequential Stephanie Hobson's abstract thoughts in the sequence she has them.

Accessibility Problem with Gilder/Levin Image Replacement Method

I have a friend who lives his life in low contrast. He is frequently the inspiration I need to go the extra mile and find an accessible solution to a programing quandary. A few weeks ago I had the good fortune to get to visit him and we cruised around the internet while drinking Rusty Nails so I could walk in his shoes for a bit.

His computer is set up to use one of Windows XP’s high contrast colour schemes and he also makes use of IE’s ability to override a website’s CSS.

He started by showing me his university’s home page and complaining about the large black areas which (on my computer) corresponded to the header and main navigation. After a quick look at the code I got the sinking feeling I knew exactly what was happening, and a quick look at the BCIT home page confirmed it. IE7 was giving any elements with a background image defined a black background regardless of the background colour they were assigned in the element.

The Gilder/Levin method basically positions a span with a background image over top of the text you want to replace. In theory, if images are not being displayed the text beneath will show through the otherwise transparent span. IE gives these spans a black background even though they should be transparent.

The screen cap below show the BCIT home page, with the black areas corresponding to span tags using the Gilder/Levin method to place images. You can also see that we’ve changed all of IE7’s accessibility settings to white in an attempt to figure out which one is causing the change without success:

Accessibility Problem

I tried many things but nothing could be done with CSS to fix it. Considering most image replacement techniques use background images of one form or another I imagine the problem happens quite frequently. My friend was still able to navigate (albeit uncomfortably) by hovering his mouse over the navigation menus and reading the tool tips.

The moral of this story could be something about roads to hell and good intentions, but I think the real lesson here is that all accessibility testing should be done over Rusty Nails. Go buy yourself some Drambuie.

1 Comment

Hi Stephanie, well, I’m reading Transcending CSS by Andy Clarke who suggest the PHARK method. After checking into it online, I learned that Google really doesn’t like this method, and (update from 2003!) search engines now can indeed read your CSS [http://www.sitepoint.com/forums/showthread.php?p=3883399] – this method is not an option for me. So, now researching other methods, I came across the Gilder/Levin method and hopefully clicked on your blog and “oops” this doesn’t work so great either. Maybe that’s why I never used any of the methods – short of writing bad CSS? Not sure. But I’m really sorry to hear that Microsoft has yet implemented another “Silly me, but I like to be difficult-bug”. I’d be happy to hear any news how to work around it. Thanks, C.

Posted by Christin on 26 September 2008 @ 2pm