Skip to main content

Curbcut WCAG AAA

Badge

A small count attached to another element.

Approvals waiting 3 items
Show the markup 
<a class="cc-link" href="#">Approvals waiting <span class="cc-badge">3<span class="cc-visually-hidden"> items</span></span></a>

Accessibility

  • A bare number is ambiguous to a screen reader — pair it with visually-hidden text saying what it counts.
  • Never use a badge as the only notification channel; the count must also exist in page content.