The alt and title attributes

When browser vendors bend the standards and implement something in a different way than what the specification states, they may cause problems, or at least confusion. One example of this is the way certain browsers, the most widely used being Internet Explorer for Windows, handle alt attributes (popularly and incorrectly referred to as “alt tags”).

Alternate text is not meant to be used as a tool tip, or more specifically, to provide additional information about an image. The title attribute, on the other hand, is meant to provide additional information about an element. That information is displayed as a tooltip by most graphical browsers, though manufacturers are free to render title text in other ways.

Many people seem to confuse these two attributes (just recently the question was raised on the Web Standards Group mailing list), so I’ll offer my opinion on how to use them.
The alt attribute

For user agents that cannot display images, forms, or applets, this attribute specifies alternate text. The language of the alternate text is specified by the lang attribute.

Source: How to specify alternate text.

The alt attribute (yes, it’s an attribute, not a tag) contains an alternative description, and is required for images and image maps. It can only be used for the img, area, and input elements (and the deprecated applet element). For the input element, the alt attribute is meant to be used for graphical submit buttons: .

Use the alt attribute to provide text for visitors who, for whatever reason, can’t see the images in your document. This includes visitors using browsers that cannot display images or have image display disabled, visually impaired visitors, and screen reader users. Alt text is to be used instead of an image, not as additional information.

Think carefully before writing alternate texts. Make sure that the text actually provides useful information to anyone not seeing the image, and that it makes sense in the context. For decorative images, use an empty string (alt="", with no space between the quotes) as the value instead of specifying irrelevant alternate text like “blue bullet” or “spacer gif”. Don’t omit it. If you do, some screen readers will read the image’s file name, and text-only browsers like Lynx will display the image’s file name. This is rarely useful to your visitors.

The easiest images to write alt text for are probably those that contain text. In that case, the text the image contains is generally what should be in the alt attribute.

When it comes to the length of alt text, here’s what the WCAG 2.0 says:

The ALT attribute value must be less than 100 characters for English text or the user must confirm that the Alt text is as short as possible.

I interpret that as “make it as short as possible, but as long as necessary”.

And don’t use the alt attribute for text that you want to appear as a tool tip. It’s not the way it was meant to be used, and as far as I know, it only works like that in Internet Explorer for Windows and in Windows versions of the ancient Netscape 4.*. No Mac browsers display alt text as a tool tip.

When browsers display alternative text as a tooltip, they are encouraging misuse of the alt attribute. Some people will write less useful alternative text because they tend to think of it as additional information, not as a replacement for the image. Others may not want the tooltips to appear, and completely omit alternative text. Both of these misuses of the alt attribute makes things harder for those who cannot see the image.

Use the title attribute for additional, non-essential information.