Badges
Badges are small, visual indicators used to provide brief supporting information at a glance about an element’s status or number count. Badge itself is not interactive. Also known as: Ribbon, tag, flag
Use Cases
User should be able to:
- Easily understand the sentiment of the badge by text only without relying on color.
- Easily understand the meaning of the badge label within the context
- Easily understand the meaning of the badge when screen reader is enabled with additional alt text if it is necessary
- Easily read the label in the text badge, marketing badge and number badge
- Easily tell the dot badge from the background
Interaction and Style
Non-text Content
Provide text alternatives for all non-text content. This includes images, buttons, form inputs, maps, etc. Text alternatives allow screen readers to describe these elements to visually impaired users.
WCAG 2.1 Understanding 1.1.1Use of Color
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
WCAG 2.1 Understanding 1.4.1Name, Role, Value
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
WCAG 2.1 Understanding 4.1.2
Keyboard Navigation
There is no keyboard navigation for badges, as they are non-interactive and do not receive focus.
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.