How to build an accessible Timeline in React
Rendered as an ordered list (ol/li) to convey sequence; the active item carries aria-current="step" and decorative markers are aria-hidden so screen readers read only the text
When to use a Timeline
- Showing an ordered sequence of events over time (activity feeds, order tracking)
- Communicating progress through discrete stages with complete/current/upcoming status
- Presenting a chronological history where order is meaningful
When not to use it
- Interactive multi-step navigation the user controls — use Tabs or a Stepper
- Unordered lists where sequence carries no meaning — use List
Accessibility
Role list, verified at WCAG 2.2-AA.
Common mistakes
Avoid: Marking several items as status="current" at once
Prefer: Exactly one current item so aria-current="step" points to a single position
Multiple current markers make the active position ambiguous for assistive tech
Example
<Timeline
items={[
{ id: '1', title: 'Order placed', time: '09:00', status: 'complete' },
{ id: '2', title: 'Shipped', time: '12:30', status: 'current' },
{ id: '3', title: 'Delivered', status: 'upcoming' },
]}
/>