Using the HTML title attribute – Updated March 2020

Takeaway

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 23 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 behavior has been supported for 20+ years, no current browser has an implemented 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:

• Labeling frame or iframe elements:
  • title="navigation">
• Providing a programmatically associated label for a control in situations where a visible text label would be redundant:
  • In 2010title="search">
  • Now in 2020 a better method for doing this is using the aria-label attribute
    • aria-label="search">
  • In 2010 labeling controls in data tables
    • title="quantity of pens">

  • Now in 2020 a better method for doing this is using the aria-label attribute or the aria-labelledby attribute.
    • aria-label="quantity of pens">

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:
  • title="PDF file, size 1 mb.">newsletter
  • Instead include such information as part of the link text or next to the link.
• Providing the same information provided as link text:
  • title="newsletter">newsletter
  • 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:
  • 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:
  • 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:
  • name 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:
  • name 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:
  • title="world wide web consortium">W3C
  • 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 cannot be provided using the title attribute, only that due to its limitations, an expansion in plain text also be provided.

HTML 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 appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

source: HTML – the title attribute

Further Reading