Prepared Docs

Prepared Docs

⌘K

    Loading navigation…

User

  1. Components
  2. Tooltip
  3. Accessibility
  4. Testing With Screen Readers

Tooltip

Testing with Screen Readers

Testing with Screen Readers

Test tooltips with screen readers to ensure proper announcements.

Expected Behavior

Expected sequence:

  1. User tabs to button: Focus moves to button
  2. Screen reader announces: "Save, button, Save your changes"
  3. User tabs away: Focus leaves button, tooltip disappears
  4. Screen reader announces next focusable element

Multiple Tooltips

Expected sequence:

  1. Tab to first button: "Action 1, button, First action"
  2. Tab to second button: "Action 2, button, Second action"
  3. 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.

Previous

Accessibility / ARIA Attributes

Next

Virtualized List / Usage

On this page

Testing with Screen Readers
Expected Behavior
Multiple Tooltips
Icon-Only Buttons
Required Tooltips
Descriptive Labels
Error Prevention
Requirement Explanations
Validation Hints
Consistent Behavior
Timing Consistency
Content Consistency