Introduction to the use of alt attribute and title attribute of HTMLimg tag_HTML/Xhtml_Web page production

When browser vendors bend the standards and do things that don't follow the rules, they can cause problems, or at least confusion. One example is the way some browsers handle alt attributes (often incorrectly called alt tags), such as Internet Explorer for Windows, which has a large number of users.

Alt text is not used as a tool tip, or to be more precise, it does not provide additional descriptive information for the image. Instead, the title attribute should be used to provide additional descriptive information for the 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 confused by these two properties (this question has been popping up on the Web Standards Group mailing list lately), so I wrote down my thoughts on how to use them.

alt attribute

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

The Alt attribute (note that it is an "attribute" rather than a "label") includes replacement instructions, which is 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 replace the submit button image. For example: .

Use the alt attribute to provide text descriptions for viewers who cannot see the images in your document. This includes users who use browsers that do not natively support image display or have image display turned off, users who are visually impaired and users who use screen readers. Alt text is used to replace an image rather than provide additional descriptive text.

Think carefully before writing alt text to make sure that the text actually provides information for those who can’t see the image and that it makes sense in context. For decorative images, use an empty value (alt="", no spaces between quotes) instead of irrelevant replacement text such as "blue bullet" or "spacer.gif". Don't ignore it. If you ignore it, some screen readers will read the file name of the image file directly, and text browsers like Lynx will display the file name of the image file, and that will be of no use to your browser.

It is easiest to set alternative text for images containing text. Generally speaking, the text contained in the image can be used as the alt attribute value.

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

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

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

Even if you want it to be displayed as a tool tip, do not use the alt attribute for text elements. This is not its intended use. As far as I know, this only works in Windows' IE browser and the ancient Netscape 4.* (windows version). No Mac browser displays this as a tool tip.

When browsers display alt text as a tool tip, 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 that cannot display the image. Others may not want the tool tip to appear, and then completely ignore the alt attribute value. These wrong practices cause difficulties for viewers who cannot see the images.

For additional explanatory information and non-essential information, please use the title attribute.

title attribute

The title attribute provides suggested 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's not necessary. Maybe that's why many people don't understand when to use it.

Use the title attribute to provide non-essential additional information. Most visual browsers display the title text as a tool tip when the mouse is hovering over a specific element. However, 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 is not very clear about the purpose of the link. This way visitors know where the links will take them and they won't load a page that they may not be interested in at all. Another potential application is to provide additional descriptive information for images, such as dates or other non-essential information.

The title attribute value can be set longer than the alt attribute value. Be aware, however, that some browsers will truncate text that is too long (such as tooltips or other). For example, Mozilla's core browser can only display the first 60 characters. This is considered a Mozilla bug and is something you should be aware of.

Think before using

My advice is to keep alt text to its essentials. In most applications, it should be left blank, alt="" (note that there are no spaces between the quotation marks). Think about those images, what information do they provide to those who are viewing them, what words should you use to describe it, or what information should you provide to people who cannot see the images? Will it really help someone who can't see the image to write the alt text as "Photo: CEO standing outside a building, wearing a gray suit and black tie, looking at the sky"? If you think so, then write it. In many cases, I think it's better to leave the replacement text blank.

For the title attribute, it is difficult to give strict usage instructions. I mostly use it on links that are not self-explanatory, such as the same link text on the same page, but different linked pages. Sometimes more descriptive text is provided for some buttons or form elements.

Longer Description

When an image requires a longer description than the alt attribute limits, there are some 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 viewer to another page, which may cause difficulty in understanding. In addition, 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 (an anchor) instead of linking to another page. In the Accessibility footnotes, Andy Clarke gives a good explanation of how to apply it.

Description links (D links) can be used to supplement longdesc. A description link is a regular link to a page containing alt text. The link is placed next to the image and is available in all browsers. There are many different opinions on its effectiveness, and I personally don't like this note. WCAG too, in their working draft HTML Techniques for WCAG 2.0, description links are "deprecated".

If a long description of the image is useful to any viewer, then you should consider simply displaying it within the same document, rather than linking to other pages or hiding it. So everyone can read it. This is a simple, low-tech approach.