The Alt Attribute

Misconceptions and Misuse

[pageoneresults]

I was reviewing a set of test questions that were submitted to me concerning web design. One of those questions was...

What is the name of the text that appears when you move your mouse over an image or graphic on a web page?

And the answer was...

Alt Image Text

I had to respond to the sender with this...

It is officially referred to as the alt attribute...

[w3.org...]

You'd be surprised as to how many people get this one wrong. The alt attribute was not designed to display on hover, that is IEs doing! If you view a site in a Mozilla based browser or Opera or any of the others that follow the standards, you will not see the alternative text on hover. The alternative text was designed to be seen by users who have images turned off, period!

Many people assume it is an area to stuff keyword phrases. Only if the image reflects those phrases. Imagine what a user with images turned off sees when they hit an overly SEO'd site that is image intensive? All those 1px spacers with 3-5 word keyword phrases stuffed into them. Hehehe.

Now, if you use the title attribute in conjunction with an image that is linked, then the intended effect is achieved.

<a title="Link to chart of search engine marketing statistics." href=http://www.example.com/><img src="/images/file.gif" alt="Screenshot of search engine marketing statistics chart."></a>

On hover, the title attribute of the <a href> is displayed. That alt attribute is there for one reason, to display a message to the user who has images turned off. And you know what, there are many. Watch a Tivo user surf the net. ;)

Now, if there were text merged in with the link, then the title attribute would not be required as the link text is going to describe the resource (hopefully).

Bottom line...

The alt attribute is used to describe the element it is attached to. This is a usability feature for those who are surfing with images off. Yes, the alt attribute is one of those many areas that search engines take into account when indexing a page. Too many of them (alt attributes) or, too much stuffing (over 80 characters) and you may raise an automated flag. Just a heads up for those of you who like to fatten up your alt attributes with irrelevant stuff. ;)

[Robin_reala]

Besides, if your alt attributes are really long you should consider a longdesc attribute with a link to a description page.

[tedster]

Note that the question is an IE-only question...and according to the W3C instructions for user agents, IE has it a bit wrong.

Other modern browsers do not display the alt attribute content as a tool-tip, and this behavior is in accordance with the W3C recommendations. Also, if a title attribute is present, then even IE will (correctly) display the title attribute, and not the alt attribute.

[Robin_reala]

Adding on to what Tedster said, if you want alt text but also don't want a tooltip then this will fix IE:

<img src="whatever" alt="text describing whatever" title="" />