Tooltips use proper ARIA attributes to communicate their purpose.
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
ARIA attributes update when tooltip state changes.
When tooltip content changes, screen readers announce the updated information when the tooltip is triggered again.
Proper focus management ensures tooltips don't disrupt user workflows.
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
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
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
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.
Ensure tooltips are visually accessible to all users.
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
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
Tooltips for truncated text improve accessibility.
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
