Alt attribute and title attribute _ CSS/HTML

Alt and title attributes by JunChen 2005-5-23 12:00:35
Original article: http://www.456bereastreet.com/archive/200412/the_alt_and_title_attributes/
Translation: JunChen

Initial: http://blog.handsbrain.com/junchen/archive/2005/05/21/3355.aspx
Copyright: This article is copyrighted by the translator Junchen. For more information, contact the translator.
When browser vendors distort standards and do something they choose not to follow the rules, they may cause some problems or at least cause confusion. One example is that some browsers process the alt attribute (generally known as the alt tag), such as Windows ie browsers with a large number of users.

The Replace text is not used for prompt, or, more specifically, it does not provide additional instructions for the image. On the contrary, the title attribute should be used to provide additional information for the element. This information is displayed as a prompt in most image browsers, although the manufacturer can render the title attribute text in any other way.

Many people seem confused about these two attributes (this problem has recently become more frequent in the Web Standards Group email list), so I wrote down my thoughts on how to use them.

Alt attribute

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

Alt attributes (note that they are "attributes" rather than "tags") include replacement instructions, which are required for images and image hotspots. It can only be used in img, area, and input elements (including applet elements ). For the input element, the alt attribute is intended to replace the image of the submit button. For example:.

The alt attribute is used to provide text instructions for those who cannot see the images in your document. This includes users who use browsers that do not support image display or that are disabled, users with visual impairment, and users who use screen readers. Replace text is used to replace images rather than provide additional instructions.

Think carefully before writing and replacing the text to ensure that the text does provide instructions for those who cannot see the image and make sense in the context. For decorative images, you can use null values (alt = "", there is no space in the quotation marks) instead of irrelevant replacement text such as "blue bulletaskcharacter spacer.gif ". Do not ignore it. If you ignore it, some screen readers will directly read the file names of image files, and those text browsers, such as Lynx, will display the file names of image files, and it will be useless for your viewers.

It is easiest to replace text with an image that contains text. text contained in an image can generally be used as an alt attribute value.

For the length of the text to replace, see what WCAG 2.0 (website content availability guide 2.0) says:

The Alt attribute must be less than 100 English characters in length or the user must ensure that the replacement text is as short as possible.
I understand it as "as short as possible and as long as possible ".

Even if you want it to be displayed as a tool tip, do not use the alt attribute for the text element. This is not its usage. So far, as far as I know, this method can only be used in Windows's IE browser and the old Netscape 4. * (windows version. A browser without a Mac will display it as a prompt ).

When the browser displays the replaced text as a prompt, the behavior that mistakenly uses the alt attribute is also encouraged. Some people begin to write meaningless replicas because they tend to think of it as an additional description, rather than being unable to display replacement of images. Others may not want the prompt to appear, and then completely ignore the value of the alt attribute. These mistakes make it difficult for those who cannot see the image.

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

Title attribute

The title attribute provides information about the creation period for the element that sets this attribute.
Source: The title attribute.

The title attribute can be used for 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 visualization browsers display the title text as a prompt message (tool tip) When hovering the cursor over a specific element. However, the manufacturer decides how to render the title text. Some browsers will display the title text in the status bar. For example, an earlier version of Safari browser.

The title attribute has a good purpose, that is, to add descriptive text for the link, especially when the connection itself is not very clear about the purpose of the link. In this way, visitors will know where the links will take them, and they will not load a page that may not be completely interested. 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 longer than the alt attribute value. However, some browsers may truncate too long text (such as tooltip or other ). For example, the Mozilla core browser can only display the first 60 characters. This is considered a Mozilla bug, which you should pay attention.

Before use

I recommend that you replace text with alt text. In most applications, it should be left White, alt = "" (note that there is no space in the two quotation marks ). Think about what information those images provide for those viewers, what text should you use to describe them, or what information should you provide for those who cannot see the images? The replacement text is written as "Photo: the CEO standing outside the building, wearing a gray suit and a black tie, looking at the sky" is really helpful for people who cannot see the image? If you think so, write it. In many cases, I think it is better to leave the replaced text in white.

It is difficult to provide strict instructions on the title attribute. I mostly use links that cannot be self-explanatory, such as the same link text and different link pages on the same page. Sometimes more instructions are provided for some buttons or form elements.

Longer description

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

The longdesc attribute can be used to provide links to a separate page containing image text descriptions. This means link the viewer to another page, which may cause difficulties in understanding. In addition, the browser's support for the longdesc attribute is inconsistent and not very good.

The longdesc attribute can contain a link to other parts of the current document (Anchor) instead of a link to another page. In Accessibility footnotes, Andy Clarke explains how to apply it.

The description link (D links) can be used to supplement longdesc. A descriptive link is a regular link that connects to a page containing replacement text. The link is placed next to the image and is accessible in all browsers. People have many different opinions on its effectiveness. My personal opinions do not like this attention. The same is for WCAG. In their work Draft HTML Techniques for WCAG 2.0, the descriptive link is "disapproved.

If the long description of an image is useful to any viewer, you must simply display it in the same document, rather than linking it to other pages or hiding it. In this way, everyone can read it. This is a simple and low-tech method.

More information

Want to know