Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

A better image replacement technique

Over on Kryogenix, Stuart has solved the CSS image replacement problem with some clever application of the overflow: hidden; property. The Fahrner Image Replacement technique is often used to replace a heading with a background image (see most of the designs in the CSS Zen Garden for examples), but has the disadvantages that it requires an additional <span> tag to be added to the code and that some screen readers which follow the display: none; directive skip straight over the replaced text without reading it. Stuart’s new technique solves both problems, and works in modern browsers from IE 5/Win upwards.

Posted 5th August 2003 at 11:30 am

This is A better image replacement technique by Simon Willison, posted on 5th August 2003.

View blog reactions

Next: More links

Previous: Minor comment system improvements

16 comments

  1. screen readers which follow the display: block;

    Shouldn't that be display:none;? But if that's correct these screen readers don't support CSS well, 'cause if you want to hide CSS from an aural browser it should be speak:none;.

    Anne van Kesteren - 5th August 2003 11:50 - #

  2. Fixed it before you got there ;) But yes, it is a problem with broken screen readers (I forget which one it is but it sits on top of IE's rendering engine and only reads "generated" content).

    Simon Willison - 5th August 2003 11:55 - #

  3. Very nice. Well spotted.

    Isn't one of the biggest problems with screen readers that almost none of them support CSS? Excepting EMACSpeak which is not exactly mainstream.

    Simon Proctor - 5th August 2003 12:26 - #

  4. display: none; applies to all media. The problem with screen readers that sit on top of normal browsers is that media-specific styling is applied wrongly. So this does exactly the wrong thing:

    @media screen { .foo { display: none; } } @media aural { .foo { display: block; } }

    (What - no <br /> or <pre>?)

    Jim Dabell - 5th August 2003 12:57 - #

  5. <pre> runs a major risk of breaking the site's layout, but since people are always asking for it I'll go and turn on <br />.
    Yup, seems to work fine.

    Simon Willison - 5th August 2003 14:12 - #

  6. Why don't you use pre{width:20em;overflow:auto;}, something similar works fine at my blog (Mozilla that is, IE isn't good at it, but it's better than this).

    An aural browser shouldn't have anything to do with the display property. But I think we are now talking about a screen reader. Those are very difficult I think. They only read from the screen and not you source code with al that "clever" css in there.

    Simon you cookies are broken or something, can't you do it with PHP, instead of JavaScript.

    Anne van Kesteren - 5th August 2003 15:29 - #

  7. I should point out that Seamus Leahy approached me two weeks ago with pretty much exactly this approach - http://www.moronicbajebus.com/playground/cssplay/i mage-replacement/ Lightning strikes twice quite frequently, it would seem. Look for a Digital Web article later this week on the issue.

    Dave S. - 5th August 2003 15:31 - #

  8. Tom Gilder uses a simlar technique for adding skip links:
    http://blog.tom.me.uk/
    (press tab to start going through as a keyboard user, and suddenly the skip link appears!)

    That is a great way of providing visible skip links without disturbing the visual appearance for visual browsers.

    With regards to hiding things visually but providing them to screenreader users, most screenreaders (well, Jaws at least) do not read CSS from an @import statement.

    This was discussed on Webaim, unfortunately the threads got a bit messed up, but these summarise fairly well:
    My reply to Peter-Paul Koch about differentiating general IE users and screen reader users.
    David Hoffman replying about the next Jaws version.
    My last post on the topic.

    David Hoffman mentioned that the next version of Jaws may read CSS from an @import, but I tried to discourage this... I'd be interested on what other people here think of that thread.

    AlastairC - 5th August 2003 15:53 - #

  9. Perhaps Jaws could use DOCTYPE switching? For pages with a valid, modern DOCTYPE it'd disregard styles applied to "screen", for other pages it'd carry on with its current approach. (I don't understand why it hasn't always just disregarded visual styles anyway, that works fine for text based browsers)

    Matt Round - 5th August 2003 19:55 - #

  10. I forget which one it is but it sits on top of IE's rendering engine and only reads "generated" content

    From Joe Clark's originating WAI mailing list, IBM's Homepage Reader may be the culprit.

    Isofarro - 6th August 2003 09:16 - #

  11. Am I the only one here using Opera 7? All I see in my window is "l>".

    Nathan - 6th August 2003 15:50 - #

  12. AFAIK, Homepage reader is a speach-browser (i.e. will 'render' the HTML itself), but Jaws & Windows eyes sit on top of the browser, typically Internet Explorer.

    Where the techniques fall down is for people who have CSS but not images (e.g. on a slow connection). Ian Lloyd made that challenge, to see if there is a technique that works in that situtation to.

    (Oh, and I noticed the failing with Opera 7, but I've not had time to investigate.)

    AlastairC - 6th August 2003 16:44 - #

  13. > Am I the only one here using Opera 7 All I see in my window is "1>".

    Yeah, I saw that too. If you look at the source you will see that the author forgot to put a closing comment tag within his style tag. Nice technique though. I am gonna test it some more.

    Marc R - 6th August 2003 18:34 - #

  14. The Opera bug is because of a missing end comment tag inside the style tag at the top of the page. If you remove that, Opera renders the page just fine. I've mailed Stuart about this so hopefully he'll fix it soon.

    Simon Willison - 6th August 2003 20:07 - #

  15. The trick I use is font-size:0 -- wouldn't that work as well?

    Ben de Groot - 7th August 2003 01:59 - #

  16. Ben: No it wouldn't. Some Browsers (Safari being the most popular) set a minimum font size by default to ensure that text is legible.

    Levin - 13th August 2003 23:15 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/08/05/betterReplacement

A django site