Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

Replacing text with images

Douglas Bowman writes about Guiltless Image Use, describing a technique that uses CSS to cause text to vanish from the page, then replaces it with a background-image. I experimented with this technique (see comments attached to that entry) myself last year but ended up using image tags inside h1 elements instead. Doug’s drop cap example shows that the technique can be applied in interesting ways outside of headers.

Posted 9th March 2003 at 8 pm

This is Replacing text with images by Simon Willison, posted on 9th March 2003.

View blog reactions

Next: Web standards for news sites

Previous: A plea for pings

3 comments

  1. This is a terrible idea. By setting the text to display: none, screen readers like JAWS, Window Eyes, Home Page Reader (that's about 98% of the market right there) will not read it. They are all based on Internet Explorer, and respect CSS/Javascript/the whole works. Accessibility is a *lot* more than text-based browsers; tricks like this that optimize for Lynx end up doing a lot more harm than good to many other users.

    As for drop caps, what's wrong with the IMG tag? JAWS reads the following word correctly:

    [img src="/graphics/B.gif" alt="B"]read

    Mark - 10th March 2003 15:46 - #

  2. I just spotted this linked to from web graphics - it looks like it would solve the problem of screen readers not "seeing" the header as instead of being set to display: none it is layered underneath a block level span with the specified background image:

    Obrazkove odkazy 2

    Simon Willison - 11th March 2003 14:18 - #

  3. True, accessibility is a lot more than being text-friendly, but it's screen readers that don't respect the media attribute that are problematic, not the concept. Slap a CSS file with media="aural" to display the text and the screen readers -- if they follow the recommendation -- should have no problem with the text. Nevertheless, the link Simon posted could be a good work around now as I doubt most screen readers are /that/ standard compliant.

    Craig - 12th March 2003 04:23 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/03/09/replacingTextWithImages

A django site