A tracking timeline communicates order, status and uncertainty. A colored line with a moving marker cannot communicate all three on its own. Begin with a useful text sequence, then add visual progress as a complementary layer.
Accessibility depends on the rendered application and its data, not just the component package. Test the page with long carrier descriptions, partial delivery and missing scan times as well as the polished delivered demo.
Make the event history readable without its graphics
Use a labeled section and a semantic list for the event history. Give each entry a description, location when available, and an explicit time label. The current state needs text such as “Out for delivery”; color and checkmarks can reinforce that text but should not replace it.
Do not render a fake datetime attribute for an unknown timezone. A source-local value can be shown as ordinary text with “timezone not supplied.” Only valid instants belong in machine-readable time values.
Keep keyboard interactions predictable
Use native buttons for expanding parcel details and links for navigation. Expose expanded state and maintain focus on the control when a section opens. If fresh data arrives, preserve the customer’s reading position rather than replacing the entire timeline or moving focus.
For split orders, give controls unique names such as “Show events for parcel 2.” Repeated “Details” controls without context make it difficult to identify the intended shipment. Empty and error states also need readable text and an available next step.
Announce meaningful changes without replaying the whole history
A small polite live region can announce that a new update is available after the page has loaded. It should not repeatedly read every scan on each poll. Deduplicate updates using your projection’s event identity or revision, and let the buyer choose when to expand more details.
HTML sketch · update the short message only for a new observation
<section aria-labelledby="parcel-heading">
<h2 id="parcel-heading">Parcel 1</h2>
<p>In transit · last verified at 14:30 UTC</p>
<ol aria-label="Carrier events">
<li>Arrived at sorting facility — scan time not supplied</li>
</ol>
<p role="status" aria-live="polite"></p>
</section>Review the complete experience
Test keyboard-only expansion, screen-reader names, visible focus, zoom and a narrow viewport. Long tracking numbers should wrap or scroll within their own area without moving the whole page horizontally. Check text and controls against their actual backgrounds.
Respect reduced-motion preferences in any decorative animation. This does not require removing motion from the normal desktop experience. Make sure a paused or absent animation still leaves a complete status message and usable controls.
Common questions
Does a successful automated accessibility audit prove the timeline is accessible?
No. Automated checks catch some issues. Manual keyboard and assistive-technology testing is still needed for focus, announcements, labels and meaningful content.
References & next steps
Implementation details were checked against Trace’s current API. External product details may change; verify the linked documentation before deciding.