Components
Badge
Badge is a non-interactive component that displays status with or without a number. Use tag if you want text instead of a number.
What you need to check
Badge that shows important information must be included in the interactive element’s accessible name.
If badge is placed inline (inside the element), the content becomes part of the accessible name. Example: <button> with the text "Inbox" and a badge with "2" will be announced as "Inbox 2".
Make sure the overall message is conveyed in cases where a badge is outside the associated component or has no content.
This is especially relevant when a badge is shown in the corner of a button or icon. In such cases, the information in the badge should be included in the element’s accessible name, for example by using aria-label.
Badge that changes value (for example 1 → 2) must be announced to screen readers
WCAG: 4.1.3 Status messages
Edit this page on github.com (opens in a new tab)