Explain in detail the confusion of ALT and title attributes in CSS

CSS browser vendors distort standards and do things on their own, and they may cause problems or at least confuse them. One example is the way some browsers handle the ALT attribute (which is often incorrectly called the ALT tag), such as the IE browser of windows with a large number of users.

The alternate text (alt text) is not used as a hint (tool tip), or, more specifically, it does not provide additional descriptive information for the picture. Conversely, the title attribute 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 optionally render the text of the title property in any other way.

A lot of people seem to be puzzled by these two attributes (the recent problem has become much more in the Web Standards Group mailing list), so I write down my thoughts on how to use them.

Alt Property

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

The ALT attribute (note "property" instead of "label") includes an alternate description, which is necessary 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. For example: <input type= "image" Src= "Image.gif" alt= "Submit"/&GT;

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

Think carefully before writing alternate text to ensure that the text does provide descriptive information for those who do not see the image, and that it is meaningful in the context. For those decorative pictures you can use an empty value (alt= "", no spaces in the quotation marks), instead of using unrelated alternate text such as "Blue Bullet" or "spacer.gif". Do not ignore it, if you ignore it, then some screen readers will directly read the file name of the image file, those text browser, such as Lynx will display the file name of the image file, and that is not used for your visitors.

Image picture with text set alternate text is the simplest, 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 what WCAG 2.0 (Web Site Content Usability Guide 2.0) says:

The ALT attribute is worth less than 100 English characters in length or the user must make sure that the replacement text is as short as possible.
I think of it as "as short as possible, as long as I need it".

Even if you want it to appear as a hint (tool tip), do not use the ALT attribute for the text element, this is not its usage. So far as I know, it works only in Windows IE browser and old Netscape 4.* (Windows version). A browser without a Mac will display it as a hint (tool tip).

When the browser displays the alternate text as a hint (tool tip), the behavior of those errors using the ALT attribute is encouraged. Some people begin to write meaningless alternative text because they tend to think it is an additional descriptive information rather than an inability to display an image replacement. Other people may not want the hint (tool tip) to appear, and then completely ignore the Write Alt attribute value. These erroneous practices create difficulties for viewers who cannot see the image.

For additional descriptive 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 attribute 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 extra information that is not essential. Most visual browsers display title text as a hint (tool tip) when the mouse hovers over a particular element, but it is up to the manufacturer to decide how to render the title text. Some browsers will display title text in the status bar. Like the previous version of Safari browser.

A good use of the title attribute is to add descriptive text to the link, especially when the connection itself is not a very clear expression of the purpose of the link. This allows visitors to know where the links will take them and they will not load a page that may not be entirely interesting. Another potential application is to provide additional descriptive information for the image, such as date 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, the Mozilla core browser can only display the first 60 characters. This is considered a Mozilla bug, and that's what you should be aware of.

Consider before use

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

For the title attribute, it is more difficult to give a strict description of the usage. I use most of the links that I can't explain, like the same link text on the same page, different link pages. Sometimes more descriptive text is provided for some 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 description of the picture text. This means linking the viewer to another page, which can be difficult to understand. In addition, the browser's support for the Longdesc attribute is inconsistent and not very good.

The Longdesc property can contain a link to other parts of the current document (anchor points) instead of linking to another page. In accessibility footnotes, Andy Clarke explains how to use it well.

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

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