How to build an accessible Terminal in React
A named group whose full script is present as visually hidden text from the first render, read once in order; the typing animation is aria-hidden, so a screen reader is never fed per-character fragments. The cursor blinks only under prefers-reduced-motion: no-preference; colours come from the editor tokens and fall back to CanvasText in forced colours
When to use a Terminal
- Demonstrating a CLI or agent run on a marketing or onboarding page
- Replaying a short agent transcript as it happened
When not to use it
- Real, long-running logs — use LogViewer
- Copyable code — use CodeSnippet
Accessibility
Role group, verified at WCAG 2.2-AA.
Common mistakes
Avoid: Putting aria-live on the typing lines
Prefer: Keep the animation aria-hidden and the full script as text, as Terminal does
A live region on per-character typing announces fragments on every frame
Example
<Terminal
lines={[
{ text: 'npx cascivo add button', prefix: '#39;, type: 'command' },
{ text: 'Added button to src/components.', type: 'output' },
{ text: '# done in 1.2s', type: 'comment' },
]}
/>