Overview
Tooltips should be accessible via keyboard navigation and provide information to assistive technologies without disrupting the user experience.
Maintain adequate colour contrast (4.5:1 minimum) and make sure interactive elements have sufficient size for easy interaction.
Keyboard Interactions
|
tab |
Moves focus to triggering element and displays tooltip |
|
Shift + Tab |
Moves focus away from triggering element and hides tooltip |
|
enter / space |
Hides the tooltip when focused |
Semantic Markup
- Use aria-describedby to associate the tooltip content with the triggering element for screen readers.
- Use role="tooltip" to identify the tooltip element for assistive technologies.
- Ensure tooltips are keyboard accessible and don't trap focus or interfere with navigation.
- Use sr-only class to provide additional context for screen readers when tooltip content needs clarification.