If you want to hide something from users using phones, tablets, and assistive technologies, and only show it to keyboard users, then use the title attribute.
detail
There is a problem with the title attribute of the HTML itself. The problem is because it doesn't perform well 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 has been further reduced. The accessibility of title attributes has become a waste of money, and due to the lack of browser support, screen readers support and producers pay attention.
The title attribute becomes redundant due to lack of support in the following cases:
For those who access web content information in their mobile browser. Usually the content of the title attribute is displayed as a prompt message in the desktop browser. As far as I know, no mobile browser supports displaying prompts, and there are no other visual methods to access the contents of title attributes.
Provide information for those who cannot use the mouse. Usually the content of the title attribute is displayed as a prompt message in the desktop browser. Although the behavior of prompting messages has been around for more than 10 years, there has never been a browser to implement the method of using the keyboard to display title attributes.
For use on most HTML elements, it provides information for people using various assistive technologies. As far as I know, screen readers do not support accessing title attribute information consistently.
Users are not friendly to title attribute as follows
Mobile phone users
Only users using keyboards
Users using screen amplifier
Screen Reader User
Users with fine motor skills disorders
Users with cognitive impairment
Examples of useful title attributes:
Label frame or iframe element:
<frame title=navigation>
Provide tags that only appear in special circumstances that require programs to implement. Using visible text tags directly will appear redundant:
<input type=text title=search> <input type=submit value=search>
Tag controls in data tables.
Examples of title attributes being useless or not very useful:
Add extra information to links or surrounding content that cannot be used as text:
<a href=newsletter.PDF title=PDF file, size 1 mb.>newsletter</a>
Instead such information should be part of the link text or beside 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 for 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 title information is the most important information and should be accessed by default by all users. If so, then this content should be next to the picture.
Used to replace the form's tags and remove visible text tags:
<input type=text title=name>
The user of the screen reader will access the form element's tag because the title attribute is included in the property name in the accessibility API (it is not supported when the text tag uses the tag element). Many other users are not like this. It is recommended to include a visible text tag where possible.
Provide the same information for form elements as visible tag content:
<label for=n1>name</label> <input type=text title=name id=n1>
Repeating visible tag text is impossible except adding a series of user cognitive noise. Don't do it. Repeating visible label text does not seem to have any effect other than adding a series of annoying cognitive noise, stopping this usage.
Provide additional instructions for form elements:
<label for=n1>name</label> <input type=text title=Please use uppercase.id=n1>
If this directive is important for the correct use of form elements, provide text information around the elements to ensure that every user can read it.
As an abbreviation extension:
<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 other user groups cannot use it. It is recommended to provide the full name in text format when the abbreviation first appears in the document, or provide a glossary of the full name form. This does not mean that the title attribute cannot be used, because it has limitations, and the full name of the text form should be provided.
HTML 5.1 includes general suggestions for using title attributes:
Relying on title attribute is currently not encouraged, because many user agents cannot display this attribute according to the specification requirements (such as the mouse pointer device needs to cause the display of prompt information, excluding users who only use the keyboard and touch screen users)
Replacing the alt attribute of the img element or as the title of the image is prohibited
Relying on the title attribute is currently prohibited, because many user agents have weak accessibility support for this attribute...