Yesterday evening, I finally submitted an entry to the CSS Zen Garden. You can see it here, if you’d like to.
I’m not completely happy with it - the layout breaks at small font sizes and in IE5.2/Mac, Opera6/everywhere, and IE5/Win - but it’s the best I’ve got in me for this particular theme. Depending on the comments I get back about it, I may try another, since I’ve got almost a dozen false starts on other themes that I could explore.
Can’t link to it yet since I’ve entered it in Intersmash’s Design Challenge, but I’m kind of excited about this one (and yes, I do remember that the last time I got excited about a CSS technique it was old hat, but pfft to you). Even if this one turns out to be an established technique, I’m still pleasantly surprised that I was able to come up with it on my own.
I feel like I’m finally getting this technology well enough to start innovating… It’s a good feeling.
OK, so somebody kick me if I’m wrong, but I think I’ve figured out a way to solve the image-off/css-on problem associated with the FIR technique of using CSS to replace text with images.
Here’s the basic issue: the FIR technique is inaccessible to users with CSS on and image loading off. In this scenario, the text being replaced is hidden by the CSS, while the replacement image is prevented from appearing by the user’s image setting.
Ordinarily, this might not be such a problem; the number of users in this situation can reasonably be assumed to be small. There is a second user group who experiences this same issue, however: users of JAWS, one of the most popular screen-reading applications.
As noted in an addendum to the article linked to above, JAWS renders web sites after applying the screen CSS rules. Thus, it would hide FIR text from its users - but since it does not render images without alt texts and there is no way to add alt texts to a background image (at this time, at least), the FIR text and the image are hidden from the JAWS user.
Anyways, I was thinking about this problem today and I came up with an alternative image replacement technique that should fix the situation. Like the FIR technique (and unlike the LIR technique described on the experiment page), it uses non-semantic <span> tags as a hook for the background image, but it doesn’t remove the original text from the page. Instead, it loads the background image over the original text. Thus, JAWS users will still hear the text, and other users with images off will still see it.
I’ve done a quick search using a few search engines, but I wasn’t able to turn up any previous references to this technique. Thus, I’m posting it here. Hope it helps someone!
EDIT: Well, so much for that bubble… I checked with Doug Bowman, and he pointed me to two previous instances of this particular solution. One’s by Tom Gilder and the other’s from Levin Alexander.
Alas, this is becoming all too frequent an occurrence - I just broke down and subscribed to browsercam. I’m justifying it to myself by saying it’s saving me from having to buy both a Mac and another PC to run IE 5, but deep down I know it’s just to have access to another cool site.
So I finally figured out a way around the problem - I’d been setting background-images on divs. Moving the images over to the headings solved the problem completely.
Of course, now I’ve got other issues - started using browsercam to test the site in Mac browsers (since I am Mac-less) and older versions of IE (since you can only have one IE install on a machine), and it gets pretty darn funky in IE5 and 5.5. Sigh, more.
