Overview
Badges should be accessible to screen readers and provide clear information about their purpose and content to assistive technologies.
Maintain adequate colour contrast (4.5:1 minimum) and make sure badge content is legible at all sizes.
Semantic Markup
- Use appropriate semantic markup with <span> or similar elements for badge containers.
- Use aria-label to provide descriptive text for badge content when needed, e.g. "3 unread messages".
- Use sr-only class to provide additional context for screen readers when badge meaning isn't immediately clear.
- Ensure badge content is announced properly when it updates dynamically.
- Consider using aria-live for badges that change frequently to announce updates to screen readers.