The Alt Attribute

The Alt Attribute

Probably one of the most misunderstood attributes that is used in web pages is the alt attribute. From many of the questions and arguments that I have seen regarding how to use it there appear to be a large number of people who have no idea whatever as to what this attribute does and what it is for.

In part the blame for this misunderstanding belongs to Microsoft who implemented the attribute incorrectly in Internet Explorer. To many people the bug in the way that IE handles the attribute is what they use the attribute for and they make no effort to use the attribute for its intended purpose.

Let's look at a couple of the questions people ask about the alt attribute which clearly identify that the person asking has no clue whatever as to what the attribute is for.

"How do I display a tooltip for content other than images?" Tooltips are added to any of the content of your page the same way. It doesn't matter whether the content you want to add the tooltip to is an image or text or whatever since the title attribute (which is the one that adds tooltips) works for all tags in the body of your page. People asking this question have been misled by the IE bug that copies the alt attribute into the title attribute for images that do not have a title attribute defined.

To fix the bug in IE so that IE will use the alt attribute correctly and not copy it into the title attribute you simply need to ensure that you include a title attribute in the image tag which contains the real tooltip text (or simply title="" if you don't need a tooltip). If you want the tooltip to actually display the alternate text description of the image then you need to include that text in both the alt and title attributes since IE is the only browser that automatically copies the alt attribute into a tooltip if the title attribute is missing.

"Why is the alt attribute mandatory?" People asking this question have either misunderstood what the alt attribute is for or are including images in their HTML that really belong in the CSS. Basically the HTML of your page defines the content of the page while the CSS defines its appearance. Which a particular image should be defined in depends on whether the image is providing information that is a part of the content or is simply there to help make the page look nicer. Where the image is simply decorative it belongs in the CSS. Images in the HTML have some meaning as far as the actual content of the page is concerned.

What you need to realise then is that not everyone can see the images in your page either because they have a plain text browser or have images disabled in their browser or they may not be able to see anything at all and are relying on a webreader to read the page content out loud to them. Since images that belong in the HTML contribute something to the content of the page those people who don't see the image still need to be supplied with that information. The alt attribute is there specifically to provide a text alternative to the image for these visitors. The alt attribute should therefore be a brief description of the same information that the image is intended to provide to those who can see the image. Another attribute longdesc can be optionally added to images where a more in depth description of the information in the image is required which provides a link to another web page containing as detailed a description of the image as is needed so that those who can't see the image still get all the information it contains.

The alt attribute is mandatory because if the image belongs in the HTML then it contributes something to the content of the page. The alt attribute therefore needs to contain the text equivalent of that contribution. The only place you'd expect to see images with an empty alt attribute is in old web pages that have not yet been fully converted to use CSS properly.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow