Using Alt and Title attributes on img tags

I was sent a tip about using alt and title attributes. I’ve noticed for a while now that Netscape 6+ doesn’t show the alt tags when you hover over them. Looking at the W3C specifications, the alt attribute is supposed to be used when the image can’t be displayed, because the image wasn’t found or the browser doesn’t support images. The title attribute is supposed to be used to provide extra information about ANY element and doesn’t have to be used only on img tags. Netscape uses the title attribute to show the little pop-up text when you hover over an image and shows the contents of the alt attribute when the image can’t be loaded. So, what is the correct attribute to use on images? It turns out the best thing to do is use both if you want to have a pop-up show when the user hovers over the image. IE will show the title attribute if it exists and the alt if title isn’t there. The title then could be a much longer description of the image and the alt tag a short explanation of what it’s for so that browser that can’t see the image will know what was supposed to be there.

For example:
<img src=”navicons/registration.jpg” alt=”Registration” title=”Click here to register for the conference”>

Will show “Click here to register for the conference” when you hover over it in either browser. It will show “Registration” in either browser if the image can’t be loaded although IE also shows a broken image icon. For screen readers, they’ll read both, “Registration” as the meaning of the image and the longer description if the user wants more information.

So, long story short, ALWAYS use alt, even if it’s blank(for bullet icons and such), and IF you want a pop-up to show use the title attribute. That said I’m certainly not suggesting that we go back and change pages we’ve already done, just keep it in mind for the future.