Feb252010

ASP.NET Image tag and Accessibility

If you are working at a company that is following Section 508 Guidelines, and building websites that are compliant with this guidelines, you should know that asp.net image tag has a bug. Let’s start with the definition of the problem first:

If you are using the images at your website purely fore decorative, then the images should have empty alt attribute such as: <img src=”…” alt=”” />.  Let’s assume now that you are using <asp:Image control to display the decorative image such as:

<asp:Image id="someDecoration" runat="server" AlternateText="" ImageSrc="..."/>
 

You will be suprised to see that  the code that this control generates is not accessible, because when the AlternateText is empty, the control does not generate the empty alt attribute but simply ignore it. If you put a space in between the quotes after the AlternateText attribute, this time screen reader will read the image alt attribute and confuse the user.
If you change the asp:Image control into html image with runat=”server attribute for whatever reason, it still has the same bug that it wont render the empty alt attribute.

The solution I found for this problem is, to use alt attribute with <asp:Image control. The control does not recognize this attribute (asp:image control uses AlternateText to render alt attribute), and as it does not recognize the attribute, it does not touch it :).

A simple hack, but works great :)



Tags:

E-mail | Permalink | Trackback | Post RSSRSS comment feed 0 Responses