NotificationBadge

The NotificationBadge component has been designed with accessibility in mind, providing a way to display important notifications with proper screen reader support.

The following props are available to improve the accessibility of your NotificationBadge component:

The NotificationBadge component automatically sets role="status" to announce updates to assistive technologies.

The ariaLabel prop is crucial for making NotificationBadge components accessible:

• It sets the aria-label attribute on the badge, providing context for screen readers
• When provided, it completely replaces what screen readers would announce about the badge’s visual content
• It’s essential when using icons or when the numerical content alone isn’t sufficient to convey meaning
• For number-only badges (like “3”), it can be used to add context about what the number represents (e.g., “3 unread messages”)

• Always provide a descriptive ariaLabel that clearly explains what the notification badge represents
• Ensure all ariaLabel text is translated to the user’s language
• Make the label concise but informative, focusing on the count and its meaning

• When using the icon prop, always provide an ariaLabel on the NotificationBadge component while adding ariaHidden to the icon itself
• Choose icons that visually reinforce the meaning of the notification

• Do not rely on color alone to convey the meaning of notifications
• While color types (critical, warning, info, etc.) help visually distinguish importance, always ensure meaning is conveyed through additional means like text, icons, or aria-label
• This approach ensures users with color vision impairments can understand the notification’s importance
• Example: Combine a “critical” type notification with an appropriate icon and descriptive ariaLabel

<NotificationBadge ariaLabel="3 unread messages">3</NotificationBadge>

Screen reader announces: “3 unread messages, status”.

<NotificationBadge type="critical" icon={<Email ariaHidden />} ariaLabel="Urgent unread message" />

Screen reader announces: “Urgent unread message, status”.

In this example, because an icon is provided, any children content would not be displayed. The ariaLabel ensures screen reader users still receive the notification information.