tl;dr
If you want to hide content from mobile and tablet users as well as assistive tech users and keyboard only users, use the title attribute.
The details
The HTML title attribute is problematic. It is problematic because it is not well supported in some crucial respects, even though it has been with us for over 14 years. With the rise of touch screen interfaces, the usefulness of this attribute has decreased. The accessibility of the title attribute has fallen victim to a unfortunate combination of poor browser support, poor screen reader support and poor authoring practices.
Situations in which the the title attribute is not useful due to lack of support:
- Displaying information for web content viewed on mobile phone browsers. Typically in desktop browsers title attribute content is displayed as a tooltip. From what I could find, tooltip display is not supported in any mobile browser and alternative visual methods of accessing title attribute content are not supported.
- Providing information for people who cannot use a mouse. Typically in desktop browsers,
title attribute content is displayed as a tooltip. Although the tooltip behaviour has been supported for 10+ years, no browser as yet has implemented a practical method to display title attribute content using the keyboard.
- Using it on most HTML elements to provide information for users of a variety of assistive technologies. Access to title attribute information is not supported uniformly by screen readers
User groups not well served by use of the title attribute
- Mobile phone users.
- Keyboard only users.
- Screen magnifier users.
- Screen reader users.
- Users with fine motor skill impairments.
- Users with cognitive impairments
Examples of title attribute use that are USEFUL:
- Labelling frame or iframe elements:
<frame title="navigation">
- Providing a programmatically associated label for a control in situations where a visible text label would be redundant:
Examples of title attribute use that are NOT USEFUL or are of LIMITED USE:
- For additional information not provided as text in a link or surrounding content:
<a href="newsletter.PDF" title="PDF file, size 1 mb.">newsletter</a>- Instead include such information as part of the link text or next to the link.
- Providing the same information provided as link text:
<a href="newsletter.PDF" title="newsletter">newsletter</a>- Recommend not duplicating content of a link in the title attribute. It does nothing and makes it less likely if people can access title attribute content that they will do so.
- For a caption on an image:
<img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
alt="The castle now has two towers and two walls.">- Presumably caption information is important information that should be available to all users by default. If so present this content as text next to the image.
- For a label on a control that has no visible text label:
<input type="text" title="name">- Screen readers users will have access to the control label, as the title attribute is mapped to the accessible name property in accessibility APIs (when a text label using the label element is not supplied ). Many other users will not. Recommend including a visible text label whenever possible.
- Providing the same information as a visible explicitly associated text label for a control:
<label for="n1">name</label> <input type="text" title="name" id="n1">- Repeating the visible label text does nothing except possibly add cognitive noise for a range of users. Do not do it.
- Providing additional instructions for a control:
<label for="n1">name</label> <input type="text" title="Please use uppercase." id="n1">- If the instructions are important for using the control correctly, then provide them in text near the control, so they can be read by everyone.
- Expansion of an abbreviation:
<abbr title="world wide web consortium">W3C</abbr>- The
title on the abbr element is well supported by screen reader software, but its use is still problematic, as other user groups cannot access the expansion. It is recommended that the expanded form of an abbreviation is provided in plain text when it is first used in a document, and/or a glossary of terms that provides the expanded form is provided. This is not to suggest that that the expansion should not be provided using the title attribute, only that due to its limitations, an expansion in plain text should also be provided.
HTML 5.1 includes general advice on use of the title attribute:
Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to apear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).
source: HTML 5.1 – the title attribute
Use of the title attribute in place of an alt attribute on an img element or for an image caption is prohibited
Relying on the title attribute is currently prohibited as many user agents do not expose the attribute in an accessible manner…
source: HTML 5.1
Further Reading
I am in the process of updating