Examples/Tooltips

Accessible Tooltips

Comprehensive guide to creating accessible tooltips with proper ARIA patterns and keyboard support.

1.3.11.4.132.1.1

WCAG Requirements

1.4.13Content on Hover or Focus

Tooltip must be dismissible
Tooltip must be hoverable
Tooltip must be persistent

2.1.1Keyboard

Tooltip must be keyboard accessible
Focus should trigger tooltip

1.3.1Info and Relationships

Tooltip must be associated with trigger
Use aria-describedby to link tooltip

ARIA Tooltip

Use role="tooltip" on the tooltip element. Associate it with the trigger using aria-describedby on the trigger pointing to the tooltip's id. The tooltip should appear on both hover and focus. Use aria-live="polite" if the tooltip appears dynamically. Ensure the tooltip is keyboard accessible and doesn't block other content.

Interactive Example

Test the accessible aria tooltip implementation

Testing Guide

Keyboard Navigation

•Tab to trigger element - tooltip appears on focus
•Press Escape to dismiss tooltip (WCAG 1.4.13)
•Tab away to close tooltip

Screen Reader

•Tooltip content is announced via aria-describedby
•Content is available when needed
•Tooltip can be dismissed without losing focus

Code Implementation

Accessible aria tooltip implementation

Best Practices

Accessibility Considerations

Key Points:

•Use aria-describedby to associate tooltip with trigger
•Tooltip should appear on both hover and focus
•Ensure tooltip doesn't block other interactive elements
•Keep tooltip text concise and helpful
•Use role='tooltip' for the tooltip element
•Ensure tooltip is keyboard accessible

Warnings:

⚠Don't use title attribute as primary tooltip method (not keyboard accessible)
⚠Avoid tooltips for critical information
⚠Don't make tooltips too large or complex

Additional Resources

Related WCAG Criteria

External Resources

ARIA Tooltip Pattern