Shipping, returns and order tracking pages everyone can use

How to make a small online store's holiday shipping cut-offs, returns policy, track-my-order form, order status steps and return requests accessible, with copyable code, platform notes and a 5-minute check.

From now until the new year, a lot of customer questions are the same three: "Will it arrive in time?", "Where is my order?" and "Can I send it back?". This season shoppers are openly venting about delivery dates that keep slipping, tracking pages stuck on "slight delay", support that only repeats apologies, and return rules they only discover afterwards. A small store that answers those questions clearly, on pages everyone can read and use, earns trust that big marketplaces are losing. But shipping cut-offs often live in a banner graphic, the returns policy is a PDF, the "track my order" form has placeholder-only fields, and the tracking steps are coloured dots. People who use a screen reader, a keyboard, voice control or magnification, and anyone checking on a phone, get stuck. Here's how to fix each part.

1. Holiday shipping cut-off dates as real text

Put the "order by" dates on a shipping page and near "Add to cart" as text, with a heading, not only inside a banner image or a moving announcement bar (1.4.5 Images of Text, 1.3.1 Info and Relationships). A simple table is easy to scan and read aloud.

<h2 id="holiday-shipping">Holiday shipping: order by these dates</h2>
<div class="table-wrap" role="region" aria-labelledby="ship-cap" tabindex="0">
  <table>
    <caption id="ship-cap">Order by these dates for delivery before December 25 (US addresses)</caption>
    <thead>
      <tr><th scope="col">Shipping method</th><th scope="col">Order by</th><th scope="col">Cost</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">Standard</th><td>Thursday, December 17</td><td>$6, free over $50</td></tr>
      <tr><th scope="row">Express</th><td>Monday, December 21</td><td>$15</td></tr>
      <tr><th scope="row">Local pickup</th><td>Wednesday, December 23, by 3 pm</td><td>Free</td></tr>
    </tbody>
  </table>
</div>
<!-- example methods, dates and prices; use your carrier's real cut-offs -->

The methods, dates and prices above are example data. Write the full date with the weekday, say which time zone a time is in, and keep the cost next to the date so nobody finds a fee at checkout. If you also show the cut-off in a banner, link it to this section. See our holiday countdown timers and sale pop-ups guide for banners and timers.

2. The returns policy as a web page, not a PDF or image

A returns policy uploaded as a PDF or a screenshot is hard to read on a phone, often unreadable to a screen reader, and can't be zoomed cleanly. Put it on a normal page with headings people can jump between (2.4.6 Headings and Labels): "How long you have", "What can't be returned", "Who pays return shipping", "How to start a return", "When you'll get your refund". Use short sentences and lists, state the number of days and any fees plainly, and give the page a clear title such as "Returns and refunds | Your Store" (2.4.2 Page Titled). Link to it from the footer, the product page and the order confirmation email. See accessible PDFs and menus and readable text.

3. A "track my order" form that anyone can fill in

Order lookup forms are usually two fields and a button, and they still fail: placeholder-only fields, no hint about where to find the order number, and errors that only turn the box red. Give each field a visible label and a hint (3.3.2 Labels or Instructions), say what went wrong in words (3.3.1 Error Identification), and let password managers and browsers fill in the email (1.3.5 Identify Input Purpose).

<form class="order-lookup" action="/orders/lookup" method="post" novalidate>
  <h2>Track your order</h2>
  <label for="order-no">Order number</label>
  <p id="order-no-hint" class="hint">It starts with # and is in your confirmation email, for example #1042.</p>
  <input id="order-no" name="order" type="text" inputmode="numeric"
         aria-describedby="order-no-hint order-no-error" required>
  <p id="order-no-error" class="error" hidden></p>

  <label for="order-email">Email used for the order</label>
  <input id="order-email" name="email" type="email" autocomplete="email" required>

  <button type="submit">Find my order</button>
</form>
<!-- example URL and order number format; use your store's real ones.
     When a lookup fails, set order-no-error text to something specific,
     for example "We couldn't find order #1042 for that email. Check both, or call us.",
     remove hidden, and move focus to the order number field. -->

The form address and order number format above are example values. If your platform shows the order status page only after sign-in, make sure the sign-in step works too; see login and CAPTCHA accessibility and form error messages.

4. Tracking steps that don't rely on colour or icons

Order status is often a row of grey and green dots or truck icons. Screen readers don't announce colour, and the icons often have no names (1.4.1 Use of Color, 1.1.1 Non-text Content). Use an ordered list with the current step marked in words and in code, and put the latest update and the expected date in a sentence.

<p class="order-summary">Order #1042: <strong>Shipped</strong>. Expected Tuesday, December 15.
  Last update: left our Tulsa shop on December 11.</p>
<ol class="order-steps" aria-label="Order progress">
  <li class="done">Order placed <span class="sr-only">(done)</span></li>
  <li class="done">Packed <span class="sr-only">(done)</span></li>
  <li class="current" aria-current="step">Shipped <span class="sr-only">(current step)</span></li>
  <li>Delivered <span class="sr-only">(not yet)</span></li>
</ol>

<style>
  .order-steps .done::before { content: "\2713  "; }          /* check mark plus text, not colour alone */
  .order-steps .current { font-weight: 700; border-left: 4px solid #1a1a1a; padding-left: .5em; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
</style>
<!-- example order details; show the real status, date and carrier update -->

The order number, dates and update above are example data. If you can't honestly promise a date, say "We'll email you when it ships" rather than showing a date that keeps moving. Link the carrier's tracking number as text with the carrier's name ("Track with USPS: 9400 1000 0000 0000 0000 00", example number), and say if the link opens another site.

5. Starting a return without a phone call or a maze

If customers start returns online, the return form needs the same basics: labelled fields, a reason picker that is a real <select> or radio group, a photo upload with a normal "Choose file" button (not only drag and drop, see dragging movements), and no asking again for details you already have, such as the address on the order (3.3.7 Redundant Entry). When it's sent, show a confirmation in text that a screen reader announces (4.1.3 Status Messages): what happens next, by when, and how the refund is paid.

6. A way to reach a person, in the same place on every page

When a delivery is late, customers want help fast. Put your contact options (email, phone, hours, and a contact form) in the same place on every page, such as the footer or header (3.2.6 Consistent Help), and include them on the shipping, returns and order status pages. If you use a chat widget, also show a plain email address and phone number, since chat pop-ups are often hard to use with a keyboard or screen reader. See cookie banners, pop-ups and chat widgets and accessible contact forms.

Platform notes

Shopify: the shipping and returns policies in your store settings publish as plain text pages, which is a good start; add headings and keep the holiday cut-off table on its own page or in a rich text section. Order status and returns apps vary, so test their forms and tracking steps with only a keyboard. See Shopify fixes.
WordPress and WooCommerce: write policies as normal pages with heading blocks and use the Table block for cut-off dates. Order tracking and returns plugins vary widely; check their field labels and error messages. See WordPress fixes.
Squarespace, Wix and GoDaddy: customer account and order pages are built in and you usually can't change their code, so focus on what you control: policy pages written as text with headings, cut-off dates in text rather than an image, and contact details in the footer. See Squarespace, Wix and GoDaddy.
Webflow and AI-built sites: you build these pages yourself, so use the table, form and ordered-list code above. AI builders often produce placeholder-only lookup fields, icon-only tracking steps and policy text pasted as an image. See Webflow fixes and AI-built sites.

Settings and app names change often, so check your platform's or app's own help pages for the current option.

Common mistakes

Holiday cut-off dates only in a banner graphic or a scrolling announcement bar.
The returns policy as a PDF or screenshot, or hidden in tiny footer text.
Return fees or restocking fees only mentioned at the end of the process.
"Track order" fields with placeholder text instead of labels, and no hint about the order number.
An error that only turns the field red, or a generic "Something went wrong".
Tracking steps shown only as coloured dots or unnamed truck icons.
A return form that only accepts drag-and-drop photos, or asks again for the shipping address.
Help only through a chat bubble, with no email or phone number on the page.

A 5-minute check you can do today

Open your shipping page. Are this year's order-by dates written as text you can select and copy?
Open your returns policy on your phone. Is it a normal page with headings, and can you find the number of days and who pays return shipping in under a minute?
Press Tab through your "track my order" form. Do the fields have visible labels, and does a wrong order number give a message in words? See our keyboard test.
Look at an order status page in greyscale (or with your eyes half closed). Can you still tell which step it's on?
From any page, can you find a phone number or email address without opening a chat window?

What a scan can and can't check here

Our scan is automated, so it finds only part of the barriers on the pages it visits. On shipping, returns and order pages it can flag form fields with no label, unnamed icon links and buttons, images with no alt attribute, missing page titles, heading and list mistakes and low contrast. It can't tell whether your cut-off dates are hidden inside an image, whether the policy is clear, whether error messages are helpful, or whether a tracking page relies on colour, and it can't sign in to see order pages, which is why the 5-minute check above matters. Our Fix-Pack reports include copy-paste fixes for your platform for what the scan finds.

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.

Check your own site, then decide

Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
$149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.