Thursday, June 18, 2009

Behavior of Image ALT Attribute in IE/Fire Fox

When browsing the web, you will often notice that a tool tip displays when you mouse over certain images as shown in the image below:

Being mostly a Microsoft IE user, I assumed that the text for this tool tip was specified in the image's alt attribute, as below:

<img src="name.gif" alt="Modeling Article">
I had noticed that the tool tips didn't work in Fire Fox, but didn't pay too much attention. As I had a case where it actually mattered recently, I did some research and learned something interesting. The alt attribute is not supposed to work that way according to the official specs. IE just made it do that. Fire Fox followed the spec and did not.

The official purpose of the alt attribute is to provide alternate text in case the image doesn't load or cannot be viewed, as shown below:

The correct way to provide a tool tip, according to the specs, is with the title attribute:

<img src="name.gif" alt="Modeling Article" title="Modeling Article">
That works as expected in Fire Fox.

Of course, you want both attributes in there because search engine's make a lot of use of the alt attribute and apparently they are meant to serve two different purposes.


Always more interesting stuff to learn...