Overview
Callouts should be accessible to screen readers and provide appropriate semantic meaning for assistive technologies. Make sure callout content is properly announced and navigable.
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 interactive elements within callout |
|
Shift + Tab |
Moves focus backwards through callout elements |
|
enter/space |
Activates links or interactive elements within callout |
Semantic Markup
- Use appropriate semantic elements (<div>, <section>) with ARIA roles to identify callout purpose.
- Use role="alert" for urgent callouts that need immediate attention, or aria-live="polite" for informational updates.
- Use aria-labelledby to associate callout titles with their content for screen readers.
- Ensure links within callouts are properly labelled and provide clear context about their destination or purpose.
- Use appropriate heading levels for callout titles to maintain document structure and navigation.