Tooltip

Testing with Screen Readers

Test tooltips with screen readers to ensure proper announcements.

Expected Behavior

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

Multiple Tooltips

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

Icon-Only Buttons

Tooltips are essential for icon-only button accessibility.

Required Tooltips

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

Descriptive Labels

Use descriptive labels in tooltips for icons.

Tooltip content should be more descriptive than icon names, explaining the action or result clearly.

Error Prevention

Use tooltips to prevent errors through clear communication.

Requirement Explanations

Explain requirements before users encounter errors.

Tooltips help users understand requirements upfront, reducing errors and frustration.

Validation Hints

Provide hints for complex validation rules.

Clear formatting hints reduce input errors and improve user experience.

Consistent Behavior

Ensure consistent tooltip behavior across the application.

Timing Consistency

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

Content Consistency

Tooltip content should follow consistent patterns.

Use consistent language patterns, punctuation, and tone across all tooltips in your application.

Accessibility / ARIA Attributes

Tree / Usage

On this page

Testing with Screen Readers

Requirement Explanations

Tooltip

Testing with Screen Readers

Test tooltips with screen readers to ensure proper announcements.

Expected Behavior

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

Multiple Tooltips

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

Icon-Only Buttons

Tooltips are essential for icon-only button accessibility.

Required Tooltips

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

Descriptive Labels

Use descriptive labels in tooltips for icons.

Tooltip content should be more descriptive than icon names, explaining the action or result clearly.

Error Prevention

Use tooltips to prevent errors through clear communication.

Requirement Explanations

Explain requirements before users encounter errors.

Tooltips help users understand requirements upfront, reducing errors and frustration.

Validation Hints

Provide hints for complex validation rules.

Clear formatting hints reduce input errors and improve user experience.

Consistent Behavior

Ensure consistent tooltip behavior across the application.

Timing Consistency

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

Content Consistency

Tooltip content should follow consistent patterns.

Use consistent language patterns, punctuation, and tone across all tooltips in your application.

Accessibility / ARIA Attributes

Tree / Usage

On this page

Testing with Screen Readers

Requirement Explanations