Introduction to the use of the alt attribute and title attribute of HTMLimg tag

When browser sellers distort standards and do things on their own, they may cause some problems, or at least cause confusion. One example is the way some browsers deal with alt attributes (usually called alt tags incorrectly), such as the IE browser with a large number of users in Windows.

Alt text is not used as tool tips, or rather, it does not provide additional instructions for images. On the contrary, the title attribute should be used to provide additional explanation information for the element. This information is displayed as a tool tip in most image browsers, although manufacturers can use any other way to render the text of the title attribute.

Many people seem to be confused by these two attributes (the question has become more common in the Web Standards Group mailing list recently), so I wrote down my thoughts on how to use them.

For user agent (UA) that cannot display images, forms, or applets, the alt attribute is used to specify alternative 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 are required for image 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 image of the submit button. For example: <input type=image src=image.gif alt=Submit />.

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

Think carefully before writing replacement text to ensure that those words do provide illustrative information for those who do not see the image and make sense in the context. For decorative images, you can use empty values ​​(alt=, no spaces in the quotes) instead of using irrelevant substitutes such as blue bullet or spacer.gif. Don't ignore it. If you ignore it, some screen readers will directly read the file name of the image file, and those text browsers, such as Lynx, will display the file name of the image file, and that will be of little use to your browser.

It is easiest to set the replacement text in an image containing text. The text contained in the image can generally be used as the alt attribute value.

As for the length of the replacement text, see what WCAG 2.0 (Website Content Usability Guide 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 short as possible and as long as possible.

Even if you want it to appear as a tool tip, don't use the alt attribute for the text element, which is not its usage. As far as I know, that does so only work in Windows IE browser and the ancient Netscape 4.* (windows version). No Mac's browser will display it as a tool tip.

When the browser displays the replacement text as a tool tip, the behavior of using the alt attribute incorrectly is also encouraged. Some people start writing meaningless substitution text because they tend to think it is an additional illusion information rather than a replacement that cannot display images. Others may not want the tool tip to appear, and then completely ignore writing the alt attribute value. These wrong practices have caused difficulties for viewers who cannot see the image.

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

The title attribute provides suggestions for elements that set this attribute.

Source: The title attribute.

The title attribute can be used on 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 non-essential additional information. Most visual browsers display title text as tool tip when the mouse is suspended on a specific element, but this is up to the manufacturer to decide how to render title text. Some browsers will display the title text in the status bar. For example, the earlier version of Safari browser.

The title attribute has a good purpose, which is to add descriptive text to the link, especially when the link itself does not express the purpose of the link very clearly. This allows visitors to know where those links will take them, and they won't load a page that may not be of interest at all. Another potential application is to provide additional illustrative information for images, such as dates or other non-essential information.

The title attribute value can be longer than the alt attribute value. However, it should be noted that some browsers truncate too long text (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 it's something you need to pay attention to.

My advice is to ensure that the replacement text is essential. In most applications, it should be left blank, alt= (note that there are no spaces in the two quotes). Think about those images, what kind of information does those views provide, what text should you use to describe it, or what information should you provide to people who don’t see the images? Writing the replacement text into a photo: The CEO standing outside the building, wearing a gray suit and a black tie, looking at the sky, is it really helpful for people who can't see the image? If you think so, then you can write it. In many cases, I think it is better to leave the replacement text blank.

For title attributes, it is difficult to give strict instructions. Most of my use is on links that cannot be self-explanatory, such as the same link text on the same page and different link pages. Sometimes more caption text is provided for some buttons or form elements.

When an image requires a longer description and exceeds the limitation of the alt attribute, there are some options.

The longdesc property can be used to provide links to a separate page containing the text description of the image. This means linking the viewer to another page, which can cause understanding difficulties. In addition, browsers support for longdesc attributes is also inconsistent, and it is not very good.

The longdesc property can contain a link to another part of the current document (anchor point) instead of linking to another page. In Accessibility footnotes, Andy Clarke explains how to apply it very well.

Description links (D links) can be used to supplement longdesc. A description link is a regular link that connects to a page containing alternative text. The link is placed next to the image and is ok in all browsers. People have a lot of different opinions on its effectiveness, and I don't like this note in my personal opinion. WCAG is also, and in their working draft HTML Techniques for WCAG 2.0, the description link is disapproved.

If a long description of the image is useful to any viewer, you have to consider simply showing it in the same document instead of linking to other pages or hiding it. This way everyone can read it. This is a simple and low-tech method.