Accessibility

For developers

Color is not enough

Never rely on color alone to convey meaning. Always pair scheme badges (is-error, is-warning, is-info, is-success) with an icon and text.

Number badges

For number badges used as counters (e.g. notification counts), provide context for screen readers:

<div class="tng-badge is-number" aria-label="3 unread notifications">3</div>

Icon-only badges

If a badge contains only an icon, include an aria-label so screen readers announce it.