- Home
- Primitives
- Badge
- Accessibility
Badge
Keyboard, focus, semantic, and consumer responsibilities for Badge.
Accessibility
Accessibility contract
Semantics
- Renders as a `<span>` element.
- Carries `data-scope="badge"` and `data-part="root"` attributes.
- Contains presentational text content provided via `children`.
ARIA
- The badge does not add ARIA roles or properties by default; it relies on its visual presentation as an inline label.
- Consumers may add semantic roles such as `role="status"` or `aria-label` depending on the context and meaning of the badge content.
Consumer responsibilities
- Provide meaningful text content via `children` that conveys the badge's purpose.
- Add `aria-label` or ARIA role when the badge conveys live or dynamic status information.
- Ensure sufficient color contrast between badge text and background for readability.
Not applicable
- keyboard
- Badge is a non-interactive display element with no keyboard interactions.
- focus
- Badge is a non-interactive display element and does not receive focus.
Review status: Draft — not yet reviewed
This contract describes what the primitive guarantees. Consuming products remain responsible for labels, layout, and workflow decisions that affect the final accessibility result.
Automated evidence
Axe scan summary
- Passes
- 1
- Violations
- 0
- Incomplete
- 0
Latest executed scan: Aug 13, 2026, 10:47 PM
Evidence IDs: axe-badge-scan-v1
Automated checks cover only the recorded fixture and do not establish complete accessibility conformance.