ALT attribute and Title Property _css/html

Author: junchen 2005-5-23 12:00:35
Original: http://www.456bereastreet.com/archive/200412/the_alt_and_title_attributes/
Translation: Junchen

Starter: http://blog.handsbrain.com/junchen/archive/2005/05/21/3355.aspx
Copyright: The copyright of this article is the translator Junchen all, reprint please contact the translator first.
When browser sellers distort standards and do things by themselves, they can create problems or at least confuse them. One example is the way some browsers handle the ALT attribute (commonly referred to as an incorrect ALT tag), such as an IE browser with a large number of users in Windows.

Alternate text (alt text) is not intended to be a hint (tool tip), or, more specifically, it does not provide additional explanatory information for a picture. Instead, the Title property should be used to provide additional descriptive information for the element. This information is displayed as a hint (tool tip) in most image browsers, although the manufacturer can take any other way to render the text of the title property.

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

ALT attribute

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

The ALT attribute (Note is "property" instead of "label") includes a replacement description, which is required for image 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 picture of the Submit button. Like what:.

The ALT attribute is used to provide text descriptions to those who cannot see the images in your document. This includes users who use browsers that do not support image display or image display, visually impaired users, and users who use screen readers. Alternate text is used instead of providing additional explanatory text instead of an image.

Think carefully before you write the alternate text, and make sure that the text does provide explanatory information for those who don't see the image, and that it has meaning in context. For those decorative images you can use an empty value (alt= "", there is no space in the middle of the quotation marks), instead of using irrelevant alternate 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 those text browsers, such as Lynx, will display the file name of the image file, which is useless for your viewers.

An image picture that contains text is the simplest to set up alternate text, and the text contained in the image can generally be used as the Alt attribute value.

As for the length of the replacement text, see how WCAG 2.0 (Website Content Usability Guide 2.0) is saying:

The ALT attribute must be less than 100 English characters long or the user must ensure that the replacement text is as short as possible.
I interpret it as "as short as possible and as long as it takes".

Even if you want it to appear as a hint (tool tip), do not use the ALT attribute for the text element, which is not its use. So far as I know, that is only available in Windows Internet Explorer and the old Netscape 4.* (Windows version). A browser that does not have a Mac will display it as a hint (tool tip).

When the browser displays the replacement text as a hint (tool tip), the behavior of those errors using the ALT attribute is also encouraged. Some people begin to write text that is not meant to be replaced because they tend to think that it is an additional descriptive message, rather than a substitute for displaying the image. Others may not want the hint (tool tip) to appear, and then ignore the Write Alt attribute value completely. These erroneous practices have created difficulties for those who cannot see the image.

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

Title Property

The Title property provides the recommended information for the element that sets the property.
Source: the title attribute.

The Title property can be used for all tags except base,basefont,head,html,meta,param,script and title. But it's not necessary. Maybe that's why a lot of people don't understand when to use it.

Use the Title property to provide non-essential additional information. Most visual browsers display the title text as a hint (tool tip) when hovering over a particular 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, an earlier version of the Safari browser.

The title attribute has a good purpose, which is to add descriptive text to the link, especially if the connection itself is not very clear about the purpose of the link. This allows visitors to know where the links will take them and they won't load a page that might not be entirely interesting. Another potential application is to provide additional descriptive information about the image, such as dates or other non-essential information.

The Title property value can be set longer than the Alt property value. Note, however, that some browsers 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 to be a Mozilla bug, which you should be aware of.

Consider before using

My advice is to ensure that the alt text is the essence of the substitution. In most applications, it should be left blank, alt= "" (Note that there are no spaces in the two quotes). Think about the images, what kind of information you should use to describe them to those who are browsing, or what information you should provide to those who can't see the images? Write the replacement text "Photo: The CEO standing outside the building, wearing a grey suit and a black tie, looking at the sky" is really helpful for people who can't see the image? If you think it is, then write it. In many cases, I think it is better to keep the text of the replacement white.

For the title attribute, it is difficult to give strict usage instructions. Most of my work is on links that are not self-explaining, such as the same link text on the same page, and a different link page. Sometimes more descriptive text is provided for buttons or form elements.

Longer description

When a picture needs a longer description than the ALT attribute limit, there are some options.

The Longdesc property can be used to provide links to a separate page that contains a text description of the picture. This means linking the browser to another page, which can cause difficulties in understanding. In addition, the browser support for the Longdesc attribute is inconsistent and not very good.

The Longdesc property can contain a link to another part of the current document (anchor Point) to replace the link to another page. At accessibility footnotes, Andy Clarke a good explanation of how to apply it.

The description link (D links) can be used to supplement longdesc. A description link is a regular link to a page that contains alternate text. The link is placed next to the image and is in all browsers. People have a lot of different opinions about its effectiveness, and my personal opinion doesn't like this attention very much. WCAG also, in their work draft HTML techniques for WCAG 2.0, describes the link being "disapproved".

If the long description of a picture is useful for any browser, then you have to consider making it simple to display in the same document instead of linking to other pages or hiding it. So that everyone can read it. This is a simple and low-tech method.

More information

Want to learn more about the Alt,title and Longdesc properties? Look here:

Guidelines on ALT texts in IMG elements
Writing Good ALT text
Accessible Alternatives
Accessibility footnotes
The image problem
Title Attribute–your Take
Using link Titles to help Users Predict Where they is going
How to specify alternate text
The title attribute

