Accessible Badges

Accessible badges communicate status, categories, or counts to all users through proper contrast, meaningful text, and screen reader support. Badges appear throughout interfaces as compact informational elements.

What Are Accessible Badges

Badges are small visual elements that label or categorize content, indicate counts, or show status. Examples include notification count badges, status tags, category labels, and user role indicators.

Accessibility considerations for badges include:

• Text contrast against badge backgrounds
• Badge visibility against page backgrounds
• Meaningful content for screen readers
• Appropriate sizing for readability
• Context for screen reader users who encounter badges

Badges often use color to communicate meaning (red for errors, green for success), requiring the same multi-channel approach as other status indicators.

How Accessible Badges Work

Text contrast requires meeting WCAG requirements within the badge. Dark text on light badges or light text on dark badges should achieve 4.5:1 contrast:

Badge background contrast against page backgrounds should provide at least 3:1 ratio so badges remain visible, particularly for non-text badges (count indicators).

Meaningful content ensures screen readers announce useful information. A badge containing just a number needs context:

For decorative badges that repeat adjacent text (a “Sale” badge next to “Sale Item” text), aria-hidden prevents redundant announcements:

Icon badges need text alternatives. A notification bell with a count badge needs labels that convey the full meaning:

Key Considerations

• Ensure text within badges meets 4.5:1 contrast
• Badge backgrounds should have 3:1 contrast against page backgrounds
• Provide screen reader context for badges with numbers or icons
• Hide decorative badges that duplicate adjacent information
• Size badges large enough for text readability
• Avoid relying on badge color alone to convey meaning
• Test badge announcements with screen readers

Common Questions

How should count badges work accessibly?

Count badges showing numbers (notification counts, item quantities) need context for screen readers. Options include:

• aria-label on the badge or container: “5 notifications”
• Visually hidden text: “5 unread messages”
• aria-describedby linking to explanatory text

The number alone without context is meaningless to screen reader users.

Should badge colors indicate status?

Badge colors can indicate status (green = active, red = error) but should be accompanied by text indicating the status. A green “Active” badge and red “Inactive” badge communicate through both color and text.

Color-only badges (green vs. red dot) fail accessibility requirements. Add text labels or distinct shapes.

How should removable tag badges work?

Tags with remove buttons need accessible removal:

• The remove button needs an accessible name: “Remove tag: JavaScript”
• Focus should move appropriately after removal (to the next tag or input)
• Removal should be announced or visually clear

The tag itself and its remove action should be separately focusable with clear purposes.

Summary

Accessible badges maintain proper text and background contrast, provide meaningful content for screen readers, and avoid relying on color alone. Context for numeric badges and proper labeling for icon badges ensure all users understand badge information.