Tooltip

ARIA Attributes

Tooltips use proper ARIA attributes to communicate their purpose.

Role and Description

Tooltips use appropriate ARIA roles.

Trigger element uses aria-describedby to reference tooltip content
Tooltip content uses appropriate role for screen reader communication
ARIA attributes are managed automatically by the component

Dynamic Content

ARIA attributes update when tooltip state changes.

When tooltip content changes, screen readers announce the updated information when the tooltip is triggered again.

Focus Management

Proper focus management ensures tooltips don't disrupt user workflows.

Focus Retention

Focus remains on the trigger element when tooltips appear.

Focus stays on the trigger when the tooltip appears
Users can continue keyboard navigation without interruption
Tooltips don't trap or steal focus
Focus behavior is predictable and consistent

Multiple Tooltips

Focus moves naturally between elements with tooltips.

Tab navigation moves focus between trigger elements
Each tooltip appears when its trigger receives focus
Previous tooltips hide when focus moves away
Focus order follows natural document flow

Disabled Elements

Tooltips on disabled elements require special handling for accessibility.

Wrapped Disabled Elements

Wrap disabled elements to enable tooltip functionality.

Disabled elements don't receive focus or pointer events
Wrapping enables tooltip functionality
Wrapper becomes focusable using tabindex="0"
Screen readers can access tooltip information

Explaining Disabled State

Use tooltips to explain why elements are disabled.

Tooltips provide context for disabled states, helping users understand requirements and next steps.

Touch Device Considerations

Tooltips have limited functionality on touch devices and require alternative approaches.

Touch Interaction Limitations

Tooltips don't work reliably on touch devices.

Touch devices lack hover interaction
Long press may not trigger tooltips consistently
Consider alternative approaches for mobile users
Provide visible text or buttons for critical information

Alternative Approaches

Provide alternative ways to access tooltip information on touch devices.

Use popovers or expandable sections for touch device users to ensure critical information is accessible.

Visual Accessibility

Ensure tooltips are visually accessible to all users.

Color Contrast

Tooltip text must meet contrast requirements.

Tooltip background and text colors provide sufficient contrast
Default styling meets WCAG AA contrast requirements
Test tooltip visibility in both light and dark themes
Ensure tooltips are readable for users with low vision

Font Size

Tooltip text size should be readable.

Tooltip font size is consistent with body text
Text remains readable when zoomed
Avoid very small text in tooltips
Ensure tooltips scale with browser font size settings

Truncated Text

Tooltips for truncated text improve accessibility.

Full Text Access

Provide full text in tooltips for truncated content.

Full text is available via tooltip for screen readers
Visual users can access complete content on hover/focus
Truncated text includes title attribute for additional accessibility
Users understand complete context even when text is shortened

Accessibility / Screen Reader Support

Accessibility / Testing with Screen Readers

On this page

Wrapped Disabled Elements

Explaining Disabled State

Touch Device Considerations

Touch Interaction Limitations

Alternative Approaches

Tooltip

ARIA Attributes

Tooltips use proper ARIA attributes to communicate their purpose.

Role and Description

Tooltips use appropriate ARIA roles.

Trigger element uses aria-describedby to reference tooltip content
Tooltip content uses appropriate role for screen reader communication
ARIA attributes are managed automatically by the component

Dynamic Content

ARIA attributes update when tooltip state changes.

When tooltip content changes, screen readers announce the updated information when the tooltip is triggered again.

Focus Management

Proper focus management ensures tooltips don't disrupt user workflows.

Focus Retention

Focus remains on the trigger element when tooltips appear.

Focus stays on the trigger when the tooltip appears
Users can continue keyboard navigation without interruption
Tooltips don't trap or steal focus
Focus behavior is predictable and consistent

Multiple Tooltips

Focus moves naturally between elements with tooltips.

Tab navigation moves focus between trigger elements
Each tooltip appears when its trigger receives focus
Previous tooltips hide when focus moves away
Focus order follows natural document flow

Disabled Elements

Tooltips on disabled elements require special handling for accessibility.

Wrapped Disabled Elements

Wrap disabled elements to enable tooltip functionality.

Disabled elements don't receive focus or pointer events
Wrapping enables tooltip functionality
Wrapper becomes focusable using tabindex="0"
Screen readers can access tooltip information

Explaining Disabled State

Use tooltips to explain why elements are disabled.

Tooltips provide context for disabled states, helping users understand requirements and next steps.

Touch Device Considerations

Tooltips have limited functionality on touch devices and require alternative approaches.

Touch Interaction Limitations

Tooltips don't work reliably on touch devices.

Touch devices lack hover interaction
Long press may not trigger tooltips consistently
Consider alternative approaches for mobile users
Provide visible text or buttons for critical information

Alternative Approaches

Provide alternative ways to access tooltip information on touch devices.

Use popovers or expandable sections for touch device users to ensure critical information is accessible.

Visual Accessibility

Ensure tooltips are visually accessible to all users.

Color Contrast

Tooltip text must meet contrast requirements.

Tooltip background and text colors provide sufficient contrast
Default styling meets WCAG AA contrast requirements
Test tooltip visibility in both light and dark themes
Ensure tooltips are readable for users with low vision

Font Size

Tooltip text size should be readable.

Tooltip font size is consistent with body text
Text remains readable when zoomed
Avoid very small text in tooltips
Ensure tooltips scale with browser font size settings

Truncated Text

Tooltips for truncated text improve accessibility.

Full Text Access

Provide full text in tooltips for truncated content.

Full text is available via tooltip for screen readers
Visual users can access complete content on hover/focus
Truncated text includes title attribute for additional accessibility
Users understand complete context even when text is shortened

Accessibility / Screen Reader Support

Accessibility / Testing with Screen Readers

On this page

Wrapped Disabled Elements

Explaining Disabled State

Touch Device Considerations

Touch Interaction Limitations

Alternative Approaches