How to build an accessible ShimmerText in React
Purely visual: the text stays real text, so it is read normally and never announced on its own. The sweep runs only under prefers-reduced-motion: no-preference (otherwise plain muted text), and forced colours render it as CanvasText. The highlight band is the AI hue, which clears AA on every shipped theme and is never weaker than the muted base it sweeps over, so the sweep never lowers contrast
When to use a ShimmerText
- Styling a short label that names work in progress — "Thinking…", "Searching the docs…"
- The trigger or heading of an AI surface while a response is being produced
When not to use it
- Announcing status to assistive tech on its own — it is a visual treatment; wrap it in AiStatus or another role="status" region
- Body copy or anything longer than a line — the sweep is meant for a glanceable label
- Placeholder for content whose shape is known — use Skeleton
Accessibility
Role none, verified at WCAG 2.2-AA.
Common mistakes
Avoid: <ShimmerText>Done</ShimmerText> left in place after the work finishes
Prefer: Render plain text once the work completes
The shimmer means "in progress"; leaving it on a finished label tells the reader something is still happening
Example
<ShimmerText>Thinking…</ShimmerText>