Badge

Badges are inline elements used to label, categorize, or organize a list of items.

Examples

Chi includes three badge variants: Solid, Outline, and Flat. Use solid badges for high emphasis,base or outline badges for medium emphasis, and flat badges for low emphasis.

Web Component

Accessibility

Keyboard Navigation

Key	Function
`Tab`	Skips over the badge (non-focusable element).
`Shift + Tab`	Skips over the badge (non-focusable element).
`Enter`,`Space`	N/A (No interactive behavior).
`Esc`	N/A (No dismissible action).

For detailed keyboard interactions, refer to our Keyboard Control Guide.

Visit WebAIM for general keyboard techniques.

Ensure badges have sufficient color contrast (minimum 4.5:1 for text and 3:1 for graphical elements).
Non-interactive badges should not receive keyboard focus; they should be ignored in the tab order.
Use semantic HTML like <span> or <div> instead of interactive elements like button.
If a badge conveys important information, provide a meaningful label using aria-label or associate it with relevant content via aria-describedby.
If a badge is purely decorative, add aria-hidden="true" to prevent it from being announced by screen readers.
Avoid using color alone to convey meaning; supplement it with text, icons, or patterns.
Maintain a consistent badge design across UI components to enhance usability and predictability.

Ensure badge text is legible, using a proper size ratio and a minimum contrast of 4.5:1 for text and 3:1 for graphical elements.
Avoid using color alone to convey meaning; include icons, patterns, or additional text where necessary.
Maintain a consistent design pattern for badges across UI components to ensure predictability and usability.
Non-interactive badges should not have focus styles or hover effects that imply interactivity.
Ensure badges do not disrupt content hierarchy and are positioned meaningfully within the layout.
If a badge provides critical information, designers should work with developers to ensure it has an accessible text alternative (e.g., aria-label or aria-labelledby).

Explore live examples in the ARIA Practices Guide.

Resources

Mozilla ARIA Role Guide: Learn about status roles for dynamically updating badge content.
WCAG Guidelines: Reference WCAG 2.2 accessibility principles for ensuring badges are perceivable and usable by all users.

Other recommendations

Find additional accessibility tips in our Accessibility Guide.

WCAG 2.2 Guidelines

Non-text Content: Ensure all badges conveying information have a text alternative. (Level A)
Info and Relationships: Maintain semantic structure for screen readers. (Level A)
Headings and Labels: Ensure badges have meaningful labels. (Level AA)
Labels or Instructions: Provide clear instructions for dismissible badges. (Level A)
Name, Role, Value: Define ARIA attributes correctly for badges. (Level A)