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