Accessible Order Tracking Pages and Delivery Updates

Order tracking pages bury status in icons, auto refreshing timelines, and carrier widgets nobody can read with a screen reader. Here is how to present delivery updates every shopper can follow.

A tracking page gets visited more than most product pages, and it is usually built from a carrier widget the store never tested. The status shows as a row of icons with no text, the timeline refreshes on its own and dumps a screen reader user back at the top, and the one useful thing, the new delivery date, sits in light grey type under a map.

WCAG 2.1 Level AA is the standard most consent decrees name, and a tracking page fails it in predictable places: 1.3.1 Info and Relationships when status is conveyed by position alone, 4.1.3 Status Messages when updates never get announced, and 1.4.3 Contrast when the carrier iframe ships its own pale palette. None of those need a redesign to fix. They need the status written out in words.

Related reading on this site: Get a free accessibility audit, Accessible Back in Stock Alerts and Waitlists That Work for Everyone, Accessible Loyalty Points Dashboards Shoppers Can Actually Read.

Write the status in words, not stages

Do not rely on a progress bar with dots labelled only by colour. Put the plain status as a heading near the top: shipped, out for delivery, delivered, delayed. Repeat the expected date in the same sentence. A shopper who cannot see the bar still gets the answer in the first screen, and a shopper who can see it stops hunting.

Under that heading, list each scan event as text with date, time, and place. Carrier feeds already send that description. Rendering it as a real list, newest first, costs nothing and it survives the widget failing to load, which happens often on slow connections.

Stop the page moving people around

Auto refresh is the quiet killer here. A page that reloads every few minutes loses keyboard focus, loses the reader's place, and in a screen reader it can restart the whole document. WCAG 2.2.1 Timing Adjustable exists for exactly this pattern. If the status needs refreshing, offer a button that says check for updates and announce the result.

The same rule covers map widgets that pan and zoom on load. Give the map a text summary next to it and make sure keyboard focus never gets trapped inside the map controls. A close or skip control that works with a keyboard is not optional polish.

Make the help path part of the page

When a parcel is late, the tracking page is where frustration lands. A contact link buried in the footer, or a chat button with no accessible name, turns a delay into a complaint. Put a named contact option inside the tracking section, tied to that order number, so the shopper does not have to retype it.

Test the whole thing in the order a keyboard user takes it: status, date, event list, delivery address, contact. If tabbing reaches the carrier iframe before the status heading, the order is wrong in the code, and that is a template fix, not a content fix.

Frequently asked questions

What WCAG failures show up most on tracking pages?

Status shown only as icons or colour, low contrast text inside carrier widgets, and pages that auto refresh and lose focus. Each one maps to a named criterion in WCAG 2.1 AA, which makes it easy to document and assign.

Does a carrier widget excuse the store from fixing this?

No. Title III of the ADA applies to the store offering the goods. A third party widget on your page is still your checkout and post purchase experience, and decrees routinely require vendors to meet the standard too.

How should delivery delays be announced?

Put the delay and the new date in the main status heading, and use a polite status region so screen readers announce the change when the shopper updates the page. Do not hide it in a banner that disappears.

Should the tracking map be removed?

Not necessarily. Keep it if it helps sighted shoppers, but give it a text equivalent, keep focus out of traps, and never let the map be the only place the delivery date appears.