How to build an accessible StreamingText in React
Plain text, never a live region, so a screen reader reads it on demand rather than being fed every character; the cursor is aria-hidden and blinks only under prefers-reduced-motion: no-preference
When to use a StreamingText
- Rendering an assistant reply as it streams in, smoothing bursty token arrival into steady typing
When not to use it
- Static text — render it directly
- Announcing the reply to screen readers — StreamingText is never a live region; announce completion with announce() or AiStatus
Accessibility
Role none, verified at WCAG 2.2-AA.
Common mistakes
Avoid: Wrapping StreamingText in aria-live
Prefer: Leave it silent and announce the finished reply once
A live region around typing text announces fragments on every frame
Example
<StreamingText text="Hello, I am cascivo." speed={3} />