What is a badge in UX design?
A badge is a small overlay element that appears on top of or adjacent to another interface element to communicate supplementary information, most commonly a numeric count or a status indicator. Notification badges on app icons or navigation items show the number of unread notifications or messages. Status badges on user avatars or list items communicate presence, availability, or category. Achievement badges in gamification systems communicate earned accomplishments. The badge component conveys information that changes regularly without requiring the user to navigate to the relevant section to check the current state.
When do badges communicate useful information?
Badges are effective when the count or status they communicate is immediately actionable, when users check the badged element regularly, and when the count is low enough to be meaningful rather than overwhelming. A badge showing 3 unread messages is useful and motivating. A badge showing 1,847 unread emails communicates that the user has given up on inbox zero rather than motivating any specific action. Badges work best for counts that users can and will address, and for statuses that change meaningfully rather than remaining permanently in a badged state.
What are the accessibility requirements for badges?
Badges that communicate counts or statuses must not rely solely on visual appearance to convey their information. Screen reader users must be able to access the badge's information through programmatic text alternatives. A notification badge showing "3" must be accompanied by accessible text such as "3 unread notifications" rather than just the visual number. When badge counts change dynamically, the change should be announced using ARIA live regions so screen reader users are aware that the count has updated without needing to navigate back to the badged element. Badge colors must meet color contrast requirements against their background.