Intelligence Community Design System

Badges provide people with a quick alert of indicating that something new is present or that something has changed. These should always be supplementary methods of conveying the information as they can be hard for everyone to understand their meaning. It is always best to show the information the badge represents in full elsewhere so that it can be understandable by everyone.

As badges can be displayed or update due to a change in information, such as the number of new emails in an inbox, it is important to make this status change announced by a screen reader. Applying a live region will make sure that a screen reader will announce the change as it happens without requiring the element to be in focus.

Badges allow an accessible label to be provided to add context to what is shown visibly. This can help people who use screen readers understand it better as they may not be able to perceive the visual context of the badge. For example, a badge showing 10 new notifications on an inbox button may be understandable to a sighted user from just the number ‘10’ on the visible label. However, it may aid a screen reader user to include ‘10 new notifications’ in its accessible label. Just make sure to always include the visible label within the accessible label.

We’ve tested this component against WCAG 2.2 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.