Badge
Using color
As a caution, relying on color alone to communicate information causes barriers to access for many readers. Color vision deficient and low vision users may not be able to perceive color differences, and screen readers do not announce colors to non-sighted users. Since a badge does not get an accessible name and is not focusable by default, each badge must have adequate contextual information provided in the surrounding layout or user interface to convey the same information that color alone is conveying.
In addition to indicating badge status via color, visible or visually-hidden text should be added manually for context.
Additional guidelines
- Ensure the badge is not interactive and cannot receive focus
- Ensure badge information is not conveyed by color alone like a read or unread badge
- Ensure that surrounding content can convey the purpose of a badge via assistive technologies
ARIA Authoring Practices Guide (APG)
Learn to use the accessibility semantics defined by the Accessible Rich Internet Application (ARIA) specification to create accessible web experiences.
Web Content Accessibility Guidelines
Understanding documents provide detailed explanations for Web Content Accessibility Guidelines (WCAG) guidelines and success criteria.
- SC 1.4.1 Use of Color (Level A)
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
