The IE PNG fix vs. Accessibility

It is no secret that all versions of Internet Explorer on Windows prior to version 7.0 has a flaw in its PNG renderer. The flaw basically involves the rendering of the alpha transparency and means that the images cannot fade nicely into the background.

The IE PNG bug explained

In the screenshots below you can see the same image as it is seen in Internet Explorer 6 and Internet Explorer 7 (Gray border added around the edge of the screenshot for your viewing pleasure):

Screenshot of IE6 png bug
PNG alpha transparency bug as seen in IE6

Screenshot of IE6 png bug fixed
No PNG alpha transparency bug as seen in IE7

Instead of showing what is truly behind the image all IE renderer’s prior to IE 7 just shows an ugly, bluish/gray background color.

The solution and a new problem

Several people have found solutions to this problem. Most noticeably is the fix by Bob Osola where I have also borrowed the above examples.

There is one problem though with these kind of fixes, and that problem is accessibility.

The idea is that you embed a piece of JavaScript in your webpage that, just before the images are displayed, runs through the DOM and replaces any img element that display a PNG image with a span element. What’s special about this span element is that it has a style attribute with a special IE-only filter called:


This filter then renders the original image inside the span element and the user sees the image as if it was just a regular img element.

But what about screen readers? Will they still recognize this as a regular image? Some may say that screen readers don’t use JavaScript anyway and therefore never gets their DOM changed. But the most popular screen reader of them all for Windows called JAWS is just a regular Windows program running next to the browser and just reads whatever code the browser holds.

Does anybody have any thoughts or experience with this? Am I for example right in my assumption that JAWS actually reads the generated code? And will that in fact be a problem? Please drop a comment with your thoughts.

Update 2006-11-06 19:10 (CET)
To better understand the accessibility implications, here is an update to clarify what Bob Osolas fix actually does. Take this example of a regular img element:

<img src="/images/sunset.png" align="left" alt="Sunset over New York" width="654" height="321" id="img421" class="largeimage" style="border: 1px solid black" />

That is then translated into this span element:

<span id="img421" class="largeimage" title="Sunset over New York" style="width:654px; height:321px; float:left; display:inline-block; border: 1px solid black; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/sunset.png', sizingMethod='scale');"></span>

In turn if the original img element is wrapped in an a element (i.e. is linkable) the following css is also added to the style attribute of the span element:


Technorati Tags: , , , , , , , , , , , ,

13 Responses to “The IE PNG fix vs. Accessibility”

  1. rupux Says:

    well, thats the IE works, fix under fix…

  2. Chris Says:

    I can think of a fix as dirty as the whole png+ie thing:
    You don’t replace the image by just a span, but two nested spans. The inner is set to display:none; and contains the alt-text (this is what the screen-reader is supposed to show, if I remember correct). The screen-reader will ignore the display:none; the browser not.
    Everyone should be happy…

    Maybe it helps also to use just one span and put the images’ alt in the title of the span.

  3. Chris Says:

    Oh and there’s another out-of-the-box-fix, IE7 from Dean Edwards:

    Afaik his fix includes background-images which is a problem for the Bob Osola-fix…

  4. Thomas Watson Steen Says:

    Hi Chris

    Actually the Bob Osola fix does use a title attribute in the span element. It takes either the alt or the title attribute of the img element if they are used.

    I’ve updated the post with information on what exactly is translated from the original img element.

  5. Thomas Watson Steen Says:

    Very interesting with the IE7 library from Dean Edwards btw… I will definitely look into it :)

  6. Thomas Baekdal Says:

    Just a thought, In what cases do you need an image to display transparent – where it is not for layout purposes?

    The reason I ask is that is that if it is only for layout purposes you will do well leaving it out of your HTML and put in into your stylesheet. Then you can make it transparent and no longer worry about accesibility.

  7. Chris Says:

    Hi Thomas (B): One problem persists (either way), AlphaImageLoader does not background-repeat or background-position. Many images with transparency are used with repeat…

    Hi Thomas (WS): I see … Well these issues will be same with the IE7-script, I guess.

  8. Thomas Watson Steen Says:

    Hi Thomas (B)

    Just a thought, In what cases do you need an image to display transparent – where it is not for layout purposes?

    You are right… A regular photo would of cause not make use of alpha transparency, but a logo could (a photo would usually be JPEG anyway).

    Another thing is if the image is linked. In that case I don’t think it would be a good idea to apply it as a background via CSS. In that case you would need a bit of hacking to make it work (hacking != good).

    Another thing is that many images are used to describe something and are actually very important to the context. I don’t know exactly how screen readers interpret HTML (and that is partly why I have written this post), but I would imagine that if the screen reader can actually “see” that this is an image it would somehow notify the user (and of cause read its alt or title attribute). If instead it was replaced by a div or span element as Bob’s hack does, the screen reader would then not recognize it as an image. I imagine it would still read the title attribute – but not inform the user that this was an image.

  9. Thomas Baekdal Says:

    Thomas (lots of Thomas’ here :o)),

    I understand what you are saying, and I do not disagree with you.

    I have been trying find an example I have (somewhere) where text is used instead images, but is still displayed using transparent PNG’s in the browser (using CSS) – and one that is not a “hack”. Unfortunately I cannot find it (I got it somewhere – I have used it a couple of years back).

  10. adrian kirsten Says:

    is there no simple something i can just add into my site and it does all the transparencies without me having to identify each and every image? like i found this one a while ago, but it ignores my css images, which makes my site look awefull in IE. That site never went live because of that problem.

    Im a designer, not a coder. So for me it is kind of hard to do things like that. I just need something that works and is straightforward and simple to use.

    Is there something like that? Is there? *sniffle*

  11. Thomas Watson Steen Says:

    Hi Adrian

    There is a couple of different things you can do depending on the way you use PNG images.

    If you are just using regular <img> elements, I suggest that you just follow method 2 on Bob Osolas website:

    To quote his page there is also fixes available if you use input image buttons or image maps:

    There is also an imagemap version if you want to use imagemaps and/or form input images and a rollover version which enables the use of transparent PNGs in rollovers.

    If you use any of the above I suggest that you read all the information available on his site – even though you are not a programmer ;) The main issue is that if you apply CSS styles directly to an <img> element these styles will no longer work since the <img> element is now changed to a <span> element – just remember to for example use a class named “image” instead.

    As he mentions there are also other solutions that might suit you better through:

    Other Solutions

    There are many other solutions to this problem – you may wish to check them out to see if they better fit your needs:

    PNG Behavior – uses .htc file & 1px GIF
    Youngpup – IE behavior & 1px GIF
    Lloyd Dalton – CSS only, no JS

    Fred Boyle emailed me with a Flash solution. He says you can "simply import the PNG into Flash and use the generated Flash movie using the WMODE parameter set to "transparent". This works wonderfully!" . I am not a user of Flash so cannot comment on this approach but hopefully some may find it helpful.

  12. Joseph Mathieu Says:

    I used the png fix on my side navigation’s background image… The fix prevents my navigation links to function. Is there a way around this problem?