Some tips on using the HTML title attribute correctly
|
If you want to hide content from users of phones, tablets, and assistive technologies, and only show it to keyboard users, use the title attribute. detail There is something wrong with the HTML title attribute itself. The problem is that it falls short in some important ways, despite being with us for more than 14 years. With the rise of touch devices, the usefulness of this property has been further reduced. The accessibility of the title attribute has become a bit of a bummer due to lack of browser support, screen reader support, and developer attention. 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 attribute is displayed as a tooltip in desktop browsers. As far as I know, no mobile browser supports displaying tooltips, and there is no other visual way to access the contents of the title attribute. Providing information for those who cannot use a mouse. Usually the content of the title attribute is displayed as a tooltip in desktop browsers. Although the behavior of prompt information has been around for more than 10 years, no browser has implemented a method to display the title attribute using the keyboard. For use on most HTML elements to provide information to people using various assistive technologies. As far as I know, screen readers do not support accessing title attribute information. The title attribute is not user-friendly as follows Mobile phone users People who only use a keyboard People who use a screen magnifier People who use a screen reader People with fine motor skills impairments People with cognitive impairments Examples of useful title attributes: To label a frame or iframe element: <frame title="navigation"> Provide labels that are displayed only in special circumstances and require programming. Using visible text labels directly would be redundant: <input type="text" title="search"> <input type="submit" value="search"> A label control in a data grid. Examples of where the title attribute is useless or of limited use: To add extra information to a link or surrounding content that is not available as text: <a href="newsletter.PDF" title="PDF file, size 1 mb.">newsletter</a> Instead such information should be included as part of the link text or next to the link. Provide the same information as the link text: <a href="newsletter.PDF" title="newsletter">newsletter</a> It is recommended not to copy the link content as the title attribute. This is actually equivalent to doing nothing. Title to use for the image: <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858." alt="The castle now has two towers and two walls."> Probably the most important information, and should be accessible to all users by default. If so, then this content should be placed right next to the image. Used to replace the form label, remove the visible text label: <input type="text" title="name"> Screen reader users will be able to access the form element's label, since the title attribute is listed as an attribute name in the accessibility API (this is not supported when using the label element for text labels). Many other users do not. It is recommended to include a visible text label whenever possible. Provide the same information as the visible label content for the form element: <label for="n1">name</label> <input type="text" title="name" id="n1"> Repeating visible label text can do nothing more than add a level of user cognitive noise. Don't do it. Repeating visible label text seems to serve no purpose other than adding an annoying amount of cognitive noise, so stop using it. Provides additional directives for form elements: <label for="n1">name</label> <input type="text" title="Please use uppercase."id="n1"> If the instructions are essential to the correct use of a form element, provide text around the element so that every user can read it. As an extension of the abbreviation: <abbr title="world wide web consortium">W3C</abbr> Although the title attribute of the abbr element is supported by screen reader software, using it is still problematic because it is inaccessible to other user groups. It is recommended that the full name of an abbreviation be provided in text format the first time it appears in the document, or in a glossary of terms. This is not to say that the title attribute cannot be used, but it is limited and the full title should be provided in text form. HTML 5.1 includes a general recommendation for using the title attribute: Relying on the title attribute is currently discouraged, as many user agents fail to display this attribute as required by the specification (e.g. requiring a mouse pointing device to cause tooltips to be displayed, excluding keyboard-only users and touchscreen users). Using the title attribute instead of the alt attribute of the img element or as the title of the image is prohibited Relying on the title attribute is currently prohibited, due to weak accessibility support for this attribute in many user agents... |
<<: Sample code for testing technology application based on Docker+Selenium Grid
>>: Use h1, h2, and h3 tags appropriately
Recommend
You Probably Don’t Need to Use Switch Statements in JavaScript
Table of contents No switch, no complex code bloc...
Implementation example of specifying container ip when creating a container in docker
When Docker creates a container, it uses the brid...
Solution to the problem of not being able to access the home page when adding a tomcat container to Docker
question The tomcat container was successfully ad...
JS realizes the automatic playback effect of pictures
This article shares the specific code of JS to ac...
Causes and solutions for MySQL too many connections error
Table of contents Brief summary At noon today, th...
How to configure MySQL master-slave replication under Windows
MySQL master-slave replication allows data from o...
Detailed explanation of TIMESTAMPDIFF case in MySQL
1. Syntax TIMESTAMPDIFF(unit,begin,end); Returns ...
Comparison of two implementation methods of Vue drop-down list
Two implementations of Vue drop-down list The fir...
The visual design path of the website should conform to user habits
Cooper talked about the user's visual path, w...
Theory Popularization——User Experience
1. Concept Analysis 1: UE User Experience <br ...
The vue project realizes drawing a watermark in a certain area
This article shares with you how to use Vue to dr...
Detailed steps to build a file server in Windows Server 2012
The file server is one of the most commonly used ...
3D tunnel effect implemented by CSS3
The effect achievedImplementation Code html <d...
Vue implements the operation code of clicking a button to download a file (backend Java)
In the previous article, I introduced the functio...