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):
PNG alpha transparency bug as seen in IE6
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:
DXImageTransform.Microsoft.AlphaImageLoader
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:
cursor:hand;
Technorati Tags: Internet Explorer, IE, IE6, IE7, png fix, images, accessibility, screen reader, JAWS, DOM, HTML, JavaScript, web development
November 6th, 2006 at 16:07 (GMT-1)
well, thats the IE works, fix under fix…
November 6th, 2006 at 16:46 (GMT-1)
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.
November 6th, 2006 at 17:07 (GMT-1)
Oh and there’s another out-of-the-box-fix, IE7 from Dean Edwards: http://dean.edwards.name/IE7/
Afaik his fix includes background-images which is a problem for the Bob Osola-fix…
November 6th, 2006 at 19:22 (GMT-1)
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.
November 6th, 2006 at 19:34 (GMT-1)
Very interesting with the IE7 library from Dean Edwards btw… I will definitely look into it :)
November 6th, 2006 at 21:40 (GMT-1)
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.
November 7th, 2006 at 07:09 (GMT-1)
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.
November 7th, 2006 at 11:17 (GMT-1)
Hi Thomas (B)
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.
November 8th, 2006 at 23:11 (GMT-1)
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).
November 9th, 2006 at 20:19 (GMT-1)
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*
November 10th, 2006 at 14:26 (GMT-1)
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:
http://homepage.ntlworld.com/bobosola/pnghowto.htm
To quote his page there is also fixes available if you use input image buttons or image maps:
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:
December 27th, 2006 at 19:09 (GMT-1)
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?