Testing with Screen Readers Test tooltips with screen readers to ensure proper announcements.
Expected sequence:
- User tabs to button: Focus moves to button
- Screen reader announces: "Save, button, Save your changes"
- User tabs away: Focus leaves button, tooltip disappears
- Screen reader announces next focusable element
Expected sequence:
- Tab to first button: "Action 1, button, First action"
- Tab to second button: "Action 2, button, Second action"
- Each tooltip is announced independently
Tooltips are essential for icon-only button accessibility.
Icon-only buttons require tooltips for accessibility.
- Tooltip provides the button's purpose for screen reader users
- Icon alone doesn't convey meaning to non-visual users
- Tooltip content describes the action or destination
- Both
title prop (for aria-label) and tooltip should be provided
Use descriptive labels in tooltips for icons.
Tooltip content should be more descriptive than icon names, explaining the action or result clearly.
Use tooltips to prevent errors through clear communication.
Explain requirements before users encounter errors.
Tooltips help users understand requirements upfront, reducing errors and frustration.
Provide hints for complex validation rules.
Clear formatting hints reduce input errors and improve user experience.
Ensure consistent tooltip behavior across the application.
Tooltips should appear and disappear consistently.
- Delay before tooltip appears is handled automatically
- Tooltip disappears immediately when hover/focus ends
- Timing is consistent across all tooltips
- Users develop predictable mental model for tooltip behavior
Tooltip content should follow consistent patterns.
Use consistent language patterns, punctuation, and tone across all tooltips in your application.