How to build an accessible AiDisclaimer in React
A plain paragraph: read in document order, never a live region, because it is static guidance rather than a status change. The sparkle is aria-hidden; muted text keeps AA contrast on every theme
When to use a AiDisclaimer
- Under an AI chat composer or answer, telling readers the output can be wrong
- Beside AI-generated summaries, drafts or suggestions that people may act on
When not to use it
- Marking a single field or card as AI-generated — use AiBadge
- Warnings the reader must act on — use Alert
Accessibility
Role paragraph, verified at WCAG 2.2-AA.
Common mistakes
Avoid: Repeating the disclaimer under every message in a conversation
Prefer: Show it once, under the composer or at the end of the thread
Repeated boilerplate is skimmed past and stops being read
Example
<AiDisclaimer />