Rampsight

All rules

ARIA

Tooltips need content

Why it matters

An element with role="tooltip" and no text produces nothing when the control it describes is focused, so the extra explanation is lost.

How to fix it

  1. Put the explanatory text inside the tooltip element.
  2. Reference it from the control with aria-describedby.
  3. Never put information in a tooltip that is not also available another way — tooltips are unreliable on touch devices.

In markup

Fails
<div role="tooltip" id="tip"></div>
Passes
<div role="tooltip" id="tip">Opens in a new window</div>

The requirement behind it

This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:

Further reading

Deque University on aria-tooltip-name (opens in new tab)

Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.

Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.