General
- Ensure sufficient colour contrast between the callout text and surface
- Do not rely on colour or icons alone to convey the type or importance of information — use clear, descriptive text that provides full context
- Keep callout content concise and easy to understand for screen readers
- The text should be meaningful without needing to see the icon or colour variant
Web
- Use the <aside> element with role="note" to identify the callout as supplementary content
- Add aria-hidden="true" to the icon so screen readers ignore it and focus on the text content
- Screen readers will not announce callouts as alerts, treating them as regular supporting content
React Native
- Use accessibilityRole="text" to ensure the callout is read as standard content
- Add accessibilityLabel if additional context is needed beyond the visible text
- The icon should be treated as decorative and hidden from assistive technologies