General
- Ensure sufficient colour contrast between the badge and the surface it is placed upon
- Use text labels that clearly describe the status or attribute
- Keep badge text concise and descriptive to work well with screen readers
- Screen readers announce badges as regular text content
- When using icons in badges, ensure the label text provides sufficient context without relying on the icon alone
- Add aria-hidden=”true” to the icon element, so screen readers ignore it and only announce the text once
- Avoid using badges for critical information that requires immediate user attention — use alerts instead
HTML
- If a badge conveys status that's only shown through colour, you might need aria-label to provide that context (e.g., a red "3" badge could have aria-label="3 urgent notifications")
- For decorative badges that duplicate nearby information, consider aria-hidden="true"
React Native
- Use accessibilityLabel if the badge's meaning needs clarification beyond the visible text
- Consider accessibilityRole="text" for consistency