Tooltip Accessible Name

Why It Matters

• Tooltips are inherently visual. They appear on hover or focus, which means they rely on sighted users noticing them. Without proper ARIA labeling, the same information is completely hidden from screen reader users.
• Supplemental info can be critical. Tooltips often contain validation hints, formatting requirements, or clarifying details that directly affect whether a user can complete a task successfully.
• Disconnected tooltips are invisible. A tooltip floating near a form field is not automatically linked to it in the accessibility tree. Without aria-describedby or a similar connection, screen readers cannot find it.
• Keyboard users need access too. Tooltips that only appear on mouse hover are inaccessible to keyboard-only users. They need to show on focus as well.

How to Get It Right

1. Connect the tooltip to its trigger with aria-describedby. Give the tooltip an id and reference it from the triggering element: <button aria-describedby="tip1">Help</button><span role="tooltip" id="tip1">Click for assistance</span>.
2. Make tooltips appear on focus, not just hover. Keyboard users need to access tooltip content too. Show the tooltip when the trigger element receives focus and hide it on blur.
3. Keep tooltip text concise. Tooltips should provide brief supplemental information, not paragraphs. If the content is long or complex, consider using a disclosure widget or inline help text instead.
4. Make sure the trigger has its own name. The tooltip supplements the trigger's label — it does not replace it. The button or control should have a clear accessible name independent of the tooltip text.
5. Allow users to dismiss the tooltip. Pressing Escape should close a visible tooltip without moving focus. This gives users control over when supplemental information is visible.

Common Mistakes

• Using title attributes as tooltips. The title attribute creates a browser-native tooltip, but it is inconsistently read by screen readers and inaccessible to keyboard and touch users. Use a proper role="tooltip" element instead.
• Forgetting aria-describedby. Creating a tooltip element with role="tooltip" but never linking it to the trigger means screen readers cannot find the connection. The association must be explicit.
• Putting essential information only in the tooltip. If users must see the information to use a feature correctly, it should be visible by default — not hidden behind a hover interaction.
• Making tooltips that cannot be hovered. If the tooltip disappears when the user moves their mouse toward it, they cannot read long content or select text from it. The tooltip should remain visible while the pointer is over it.