Presents ordered events, milestones, or state transitions with a connected vertical rail.
Structure
Timeline renders as an ordered list (<ol>) by default, and each TimelineItem renders as a list item (<li>), including marker-less rows. The ordered list communicates that sequence is meaningful, so assistive technology reads the events in document order. The list element can be changed with the as prop when a different container is more appropriate (for example, as="ul" when order is not significant).
Each row's connecting rail is drawn with CSS (pseudo-elements), so it never enters the accessibility tree. The marker is a decorative Coin; the event's meaning comes from its visible text (title, description, and meta), which renders as plain text. Timeline has no inherent interactivity or keyboard handling. Accessibility for any interactive content placed inside a row, such as links or buttons in custom row content, is handled by those individual components.
ARIA
| Element | Attribute | Description |
|---|---|---|
| Item marker | aria-hidden="true" | Applied to the marker coin and its track wrapper when markerLabel is not set, hiding the decorative marker from assistive technology. |
| Item marker | role="img" | Applied to the marker coin when markerLabel is set, exposing it as a meaningful image to assistive technology. |
| Item marker | aria-label | Set to markerLabel on the marker coin when provided, giving the marker an accessible name. |
The connecting rail is a CSS pseudo-element, so it is never in the accessibility tree and needs no ARIA. The icon rendered inside a marker is decorative and is hidden from the accessibility tree by the Icon component itself. When markerLabel is set, the marker's role="img" and aria-label provide the accessible name, not the icon. Content placed inside a marker-less TimelineItem (such as a Banner) manages its own accessibility.
Markers and rails
The connecting rail and event markers are decorative by default and hidden from assistive technology, so the timeline reads as a plain ordered list of its text content. Set markerLabel only when a marker communicates information that is not already present in the row's visible text. It promotes the marker to a labeled image (role="img" with markerLabel as its accessible name).
Avoid markerLabel text that repeats the row's title, which causes redundant announcements in assistive technology.
Color and meaning
Timeline uses color, shape, and lineVariant to distinguish event types and states. Color must never be the sole indicator of meaning, because not all users perceive color the same way. Pair color with text in the title, description, or meta (for example, "Failed" or "Not yet") so the meaning is available to everyone.