By Simon Willison


By Simon Willison

I attended SxSW Interactive last week in Ausin, Texas. Two highlights of the conference were the CSS panels on Monday morning: Hi-Fi Design with CSS and CSS: The Good, the Bad and the Ugly. Several of the slides from these presentations are available online:

There was great information presented in all of the above, but the point that struck home hardest, at least for me, was when Doug Bowman anounced the infamous Fahrner Image Replacement technique deprecated. Image replacement techniques are CSS methods of replacing text with an image, with FIH the first and most famous. Although designed to improve accessibility, the technique actually has the opposite effect thanks to many screen readers ignoring text that has been set to display: none in the CSS. Joe Clark’s article in A List Apart from last year has the full technical details.

Various other image replacement techniques have sprung up to replace FIR, but so far every one of them has the distinct disadvantage of rendering content completely invisible for users with images turned off in their browser. I myself have run in to this while browsing with Opera 7 on a dial-up connection as Opera provides a fantastically useful keyboard shortcut (‘g’) to instantly disable and re-enable images, allowing for dramatically improved browsing performance.

My recommendation is to avoid image replacement techniques unless the usability of the site is not hugely affected by the replaced text not being visible at all. Unfortunately this rules the technique out in most cases. Remember though, from an accessibility point of view an image with a properly chosen alt attribute is just as accessible as plain HTM text!

One of the panels I missed was Accessibility for Everyone. Thankfully, Jeffrey Veen has posted the notes he used for his part of the panel: I don’t care about accessibility. Jeffrey’s point is that properly created sites using modern techniques don’t need to worry about accessibility because it pretty much comes as default if you build the site correctly in the first place. I couldn’t agree more.

  • Stuart Langridge

    “Remember though, from an accessibility point of view an image with a properly chosen alt attribute is just as accessible as plain HTM text!”
    It looks a mess, though, in non-CSS browsers. That’s why I prefer image replacement techniques. I’d be interested in figures which showed whether non-CSS browsers or CSS-browsers-with-images-turned-off are more popular.

  • Dave’s presentation was one I think many web designers from the 90’s would enjoy.

  • Rik

    Just when you think image replacement is dead, Paul O’B comes up with something that just might work.

  • That one comes close, but it falls apart when you enlarge your text sizes. Of course, you could always use CSS to give the header text a small starting font size – people who increase their font size by enough to break that are probably used to strange visual side-effects in any case.

Get the latest in JavaScript, once a week, for free.