Do not use the title attribute to create tooltips

The title attribute is not well supported by assistive technologies.

This page provides information related to custom tooltips. Tooltips are small pop-up messages that contain supplemental helper information. They are often used to clarify information required for a form input.

There are multiple problems with custom tooltips from an accessibility perspective:

Tooltips are often unavailable or difficult to perceive for people using assistive technology.
Tooltips can be difficult or impossible to open and close for keyboard or mobile users.
The use of too many tooltips can be disruptive when people are trying to complete a task.
Users may find it difficult to find the details they need to complete their task if important information is hidden in a tooltip.

Note

Do not use tooltips for information that users need to complete a task.

When to use a tooltip

for supplemental information that is not vital to task completion
for short snippets of information only (no more than 80 characters)

Principles for effective accessible tooltips

If you must use tooltips, ensure the following:

Do not include any interactive elements in a tooltip (e.g. links or buttons).
If your tip requires interactive elements, use another design pattern (e.g modal dialog).
Make sure the tooltip is centred above or below the element that it refers to, and clearly visually connected
Make sure the tooltip can be opened by keyboard (with ENTER and SPACEBAR keys), tap, or click
Make sure the tooltip can be closed by keyboard (with ESC key), tap, or click. Do not include a close button.
Follow proper colour contrast requirements for text in the tooltip
Use the default body text size for the tooltip
Ensure tooltip content does not duplicate other content already on the page.

Implementation

There is currently no agreed-upon pattern for accessible tooltips recommended by the WAI-ARIA Authoring Practices.

If you must implement a tooltip, observe the principles above, and review Heydon Pickering's article on Tooltips & Toggletips.

Related WCAG Criteria

WCAG 1.4.13 Content on Hover or Focus

WCAG 2.1.1 Keyboard