Accessible Tooltips

Accessible tooltips provide supplementary information in a way that works for keyboard users and screen readers. Proper tooltip implementation ensures additional context is available to all users, not just mouse users.

What Are Accessible Tooltips

Tooltips are small text popups that appear when users hover over or focus on trigger elements. They provide additional information, explain controls, or show full text for truncated content.

Accessibility challenges with tooltips include:

• Appearing only on mouse hover, excluding keyboard users
• Not being announced to screen readers
• Disappearing too quickly to read
• Covering other content users need to see
• Mobile users having no hover capability

WCAG 1.4.13 (Content on Hover or Focus) at Level AA provides specific requirements for hover-triggered content including tooltips.

How Accessible Tooltips Work

Keyboard accessibility requires tooltips to appear on focus, not just hover. When keyboard users Tab to a trigger element, the tooltip should display:

Screen reader accessibility uses aria-describedby to associate tooltip content with triggers. This allows screen readers to announce tooltip content when focusing the trigger:

Timing requirements from WCAG 1.4.13 specify that hover-triggered content must:

• Be dismissible (Escape key closes without moving focus)
• Be hoverable (users can move pointer to tooltip without it disappearing)
• Be persistent (stays visible until user dismisses or moves away)

These requirements ensure users can read and interact with tooltip content rather than having it disappear unexpectedly.

Positioning should not obscure the trigger or other content users need to see. Tooltips typically appear above, below, or beside triggers with automatic repositioning to stay within viewport.

Key Considerations

• Show tooltips on both hover and keyboard focus
• Connect tooltips to triggers with aria-describedby
• Allow Escape key dismissal
• Keep tooltips visible when users hover over them
• Position tooltips to avoid obscuring important content
• Ensure adequate tooltip display time
• Consider mobile users who cannot hover

Common Questions

How long should tooltips display?

Tooltips should remain visible as long as the trigger has focus or hover. Do not auto-hide tooltips on a timer while users are still engaged with the trigger.

When users move focus or hover away, tooltips can hide immediately or with a brief delay to avoid flashing during incidental movements.

Should tooltips be used for essential information?

Tooltips should contain supplementary information, not essential content. Information required to complete tasks should be visible without triggering tooltips.

If information is essential, display it directly or use a different pattern (help text, expandable sections) rather than hiding it in tooltips.

How do tooltips work on touch devices?

Touch devices lack hover state, making hover-triggered tooltips inaccessible. Options include:

• Touch to toggle tooltip visibility
• Long-press to show tooltip
• Alternative information display (help icon that opens info)
• Showing tooltip content by default on mobile

Design systems should define how tooltips adapt for touch interaction.

Summary

Accessible tooltips appear on both hover and focus, connect to triggers via aria-describedby for screen readers, and follow WCAG timing requirements for dismissibility, hoverability, and persistence. Tooltips provide supplementary information that enhances but does not replace essential visible content.