Introduction to the use of alt and title attributes of HTML img tags

When browser vendors bend the standards and take it upon themselves to do things that don't follow the rules, they can cause problems, or at least confusion. One example is the way some browsers, such as Internet Explorer for Windows, handle the alt attribute (often incorrectly called the alt tag), which has a large user base.

Alt text is not used as a tool tip, or more precisely, it is not used to provide additional information about the image. Instead, the title attribute should be used to provide additional descriptive information for an element. This information is displayed as a tool tip in most image browsers, although manufacturers are free to render the title attribute text in other ways.

A lot of people seem to be confused about these two properties (this question has been asked a lot lately on the Web Standards Group mailing list), so I wrote down my thoughts on how to use them.

alt attribute

The alt attribute is used to specify alternative text for user agents (UAs) that cannot display images, forms, or applets. The language of the replacement text is specified by the lang attribute. Source: How to specify alternate text.

Alt attributes (note the word "attribute" and not "tag") contain alternate descriptions and are required for images and image hotspots. It can only be used in img, area, and input elements (including applet elements). For input elements, the alt attribute is intended to be used to replace the submit button's image. For example: <input type="image" src="image.gif" alt="Submit" />.

The purpose of using the alt attribute is to provide a text description for viewers who cannot see the images in your document. This includes users who use browsers that don't natively support image display or have image display turned off, users with visual impairments, and users who use screen readers. Alt text is used to replace images rather than provide additional description text.

Think carefully before writing alt text to make sure it actually provides information for people who can’t see the image and that it makes sense in context. For decorative images, use an empty value (alt="" with no spaces between the quotes) instead of using irrelevant alt text like "blue bullet" or "spacer.gif". Don't omit it, if you do some screen readers will read the image filename directly, and text browsers like Lynx will display the image filename, which is not useful to your viewers.

It is easiest to set alternative text for images that contain text. The text contained in the image can generally be used as the alt attribute value.

As for the length of alternative text, take a look at what WCAG 2.0 (Web Content Accessibility Guidelines 2.0) says:

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

I understand it as "as short as possible, as long as necessary".

Don’t use the alt attribute on text elements, even if you want it to appear as a tool tip; that’s not how it’s meant to be used. As far as I know, this only works in IE on Windows and ancient Netscape 4.* (Windows version). No Mac browser will display this as a tool tip.

When browsers display alternative text as tool tips, incorrect use of the alt attribute is encouraged. Some people start writing meaningless alt text because they tend to think of it as additional descriptive information rather than a replacement for the image that doesn't display. Others may not want a tool tip to appear and simply ignore the alt attribute value altogether. These incorrect practices create difficulties for viewers who cannot see the images.

Please use the title attribute for additional descriptive information and non-essential information.

Title Attribute

The title attribute provides advisory information for the element on which it is set.
Source: The title attribute.

The title attribute can be used in all tags except base, basefont, head, html, meta, param, script, and title. But it is not necessary. Maybe that’s why many people don’t understand when to use it.

Use the title attribute to provide nonessential additional information. Most visual browsers display the title text as a tool tip when the mouse hovers over a specific element, but it is up to the manufacturer to decide how to render the title text. Some browsers will display the title text in the status bar. For example, early versions of the Safari browser.

A good use of the title attribute is to add descriptive text to a link, especially when the link itself doesn't clearly convey the purpose of the link. This lets visitors know where the links will take them, so they don't load a page that they may not be interested in. Another potential application is to provide additional captions for images, such as dates or other non-essential information.

The title attribute value can be longer than the alt attribute value. Be aware, though, that some browsers will truncate long text (like tooltips or whatever). For example, Mozilla-based browsers can only display the first 60 characters. This is considered a Mozilla bug, and is something you should be aware of.

Consider before use

My advice is to keep your alt text concise. In most applications, it should be left blank, alt="" (note there is no space between the two quotes). Think about those images, what information do they provide to those viewing them, what words should you use to describe it, or what information should you provide for those who can’t see the image? Would having the alt text be “Photo of CEO standing outside building, wearing grey suit and black tie, looking up at sky” really help someone who can’t see the image? If you think so, then write it. In many cases, I feel it is better to leave the replacement text blank.

It is difficult to give strict instructions for the title attribute. I mostly use it for links that aren't self-explanatory, like the same link text on the same page, but different linking pages. Sometimes more explanatory text is also provided for some buttons or form elements.

Longer description

When an image requires a longer description than can fit in the alt attribute, there are a few options.

The longdesc attribute can be used to provide a link to a separate page containing a text description of the image. This means linking the visitor to another page, which may make it difficult to understand. Additionally, browser support for the longdesc attribute is inconsistent and not very good.

The longdesc attribute can contain a link to another part of the current document (anchor) instead of linking to another page. In the Accessibility footnotes, Andy Clarke does a great job explaining how to use this.

Description links (D links) can be used to supplement longdesc. A description link is a regular link that leads to a page with alternative text. The link is placed next to the image and is accessible in all browsers. There is a lot of disagreement about its effectiveness, and I personally don't like this idea very much. WCAG also, in their working draft HTML Techniques for WCAG 2.0, lists description links as "deprecated".

If a long description of the image would be useful to any viewer, then you might want to consider simply displaying it in the same document, rather than linking it off to another page or hiding it away. That way everyone can read it. This is a simple and low-tech method.

<<: What is a MySQL index? Ask if you don't understand

>>: How to implement the webpage anti-copying function (with cracking method)