Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use the title attribute of HTML, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

If you want to hide something from users of phones, tablets and assistive technologies and display it only for keyboard users, use the title attribute.

Details

There is a problem with the title property of HTML itself. The reason for the problem is that it is not good enough in some important aspects, even though it has been with us for more than 14 years. With the rise of touch devices, the role of this attribute is further reduced. The accessibility of the title property becomes very difficult, due to the lack of browser support, the support of screen readers and the attention of the production staff.

The title attribute becomes redundant due to lack of support in the following cases:

For people who access web content information in mobile browsers. Usually the content of the title property is displayed as a prompt in a desktop browser. As far as I know, no mobile browser supports displaying prompts, and there are no other visual ways to access the content of the title properties.

Provide information for those who cannot use the mouse. Usually the content of the title property is displayed as a prompt in a desktop browser. Although the behavior of prompting messages has been around for more than 10 years, there has been no way for browsers to display title properties on the keyboard.

For using it on most HTML elements, it provides information for people who use various assistive technologies. As far as I know, screen readers do not support consistent access to title property information.

The title attribute is not friendly to users as follows

Mobile phone users

Users who only use the keyboard

Users using screen amplifiers

Screen reader user

Users with impaired fine motor skills

Users with cognitive impairment

Useful examples of the title property:

Tag the frame or iframe element:

Providing tags that can only be displayed in special cases that require a program, it would be redundant to use visible text tags directly:

Label controls in the data table.

Examples where the title attribute is useless or not useful:

Add additional information to links or surrounding content that cannot be used as text:

Newsletter

Instead, such information should be part of the link text or next to the link.

Provide the same information as the link text:

Newsletter

It is recommended that you do not copy the linked content as a title property. This is actually tantamount to doing nothing.

Title for the image:

Probably the title information is the most important information and should be accessible by all users by default. If so, then the content should be next to the picture.

To replace the label of the form, remove the visible text label:

Users of the screen reader will access the tag of the form element because the title attribute is included in the attribute name in the accessibility api (not supported when text tags use tag elements). Many other users do not. It is recommended that you include a visible text label whenever possible.

Provide form elements with the same information as visible tags:

Name

It is impossible to repeat visible tag text except to add a series of user cognitive noise. Don't do it. Repeated visible tag text does not seem to have any effect except to add a series of annoying cognitive noises to stop this usage.

Provide additional instructions for form elements:

Name

If this instruction is important for the correct use of form elements, provide text information around the element to make sure that every user can read it.

As an extension of an abbreviation:

W3C

Although the title attribute of the abbr element is supported by screen reader software, it is still problematic to use because other user groups cannot use it. It is recommended to provide a full name of the text format or a glossary in full form when the acronym appears for the first time in the document. This is not to say that the title attribute cannot be used, because of its limitations, a full name in textual form should be provided.

HTML5.1 includes general recommendations for using the title attribute:

Reliance on the title attribute is currently discouraged because many user agents cannot display this property as required by the specification (for example, the display of prompts caused by a mouse pointer device is required, excluding keyboard-only users and touchscreen users)

It is prohibited to use the title attribute instead of the alt attribute of the img element or as the title of the picture.

Relying on the title attribute is currently prohibited because many user agents have weak accessibility support for this attribute.

The above is all the content of the article "how to use the title attribute of HTML". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.