Altwise

Holiday sales, countdown timers, pop-ups and time limits: an accessibility check for small business sites

How to run a Black Friday or holiday sale on a small business website without locking customers out: plain-text deadlines, a countdown people can hide, cart and booking time limits that warn and extend, keyboard-friendly pop-ups, announced cart messages, platform notes and a 10-minute check.

Holiday shopping starts earlier every year, and many small business sites now add a countdown timer, a sale pop-up, a sticky announcement bar and a "your cart is reserved for 10 minutes" message in November. Each of these can quietly lock some customers out. A timer that ticks every second interrupts screen readers and distracts people who find movement hard to ignore. A cart or booking hold that expires without warning pushes out people who type slowly, use a switch device or need longer to read. A pop-up that grabs the screen and can't be closed with the keyboard ends the visit. None of this means dropping your sale. It means a few small changes so every customer can actually buy.

1. Write the deadline as plain text

A ticking timer is the least useful way to tell someone when a sale ends. Put the end date and time in a normal sentence first, so screen reader users, people using translation and anyone who reads slowly all get it. The timer, if you keep one, is extra.

2. If you keep a countdown, let people hide it and keep it quiet

Content that moves or updates on its own for more than 5 seconds next to other content needs a way to pause, stop or hide it (2.2.2 Pause, Stop, Hide). A countdown updating every second counts. Keep the timer out of live announcements, or screen readers will try to read it every second.

<div class="sale-bar">
  <p><strong>Holiday sale: 20% off everything.</strong>
     Ends Monday, November 30 at 11:59 pm Central.</p>
  <p id="sale-timer" aria-hidden="true">Ends in <span id="sale-left"></span></p>
  <button type="button" id="sale-hide">Hide countdown</button>
</div>
<script>
  const end = new Date("2026-12-01T05:59:00Z"); // Nov 30, 11:59 pm Central
  const left = document.getElementById("sale-left");
  const timer = document.getElementById("sale-timer");
  const hide = document.getElementById("sale-hide");
  function tick() {
    const ms = end - Date.now();
    if (ms <= 0) { timer.textContent = "This sale has ended."; return; }
    const d = Math.floor(ms / 86400000), h = Math.floor(ms / 3600000) % 24,
          m = Math.floor(ms / 60000) % 60;
    left.textContent = d + " days " + h + " hours " + m + " minutes";
  }
  tick();
  const id = setInterval(tick, 60000); // once a minute, not every second
  hide.addEventListener("click", () => {
    clearInterval(id); timer.hidden = true; hide.hidden = true;
  });
</script>

The offer, date and time are example details; use your own. The sentence above the timer carries the real information, the timer is hidden from screen readers with aria-hidden, it updates once a minute instead of every second, and the button stops and hides it. A countdown that also blinks or flashes needs to go.

3. Time limits on carts, bookings and forms: warn and extend

If your shop, booking tool or checkout holds an item or a session for a set time, people must be able to turn the limit off, adjust it, or extend it with a simple action when warned at least 20 seconds before it runs out (2.2.1 Timing Adjustable). The end of a real sale is a real-world deadline, so the sale itself can end when it ends; it's the hidden timers inside your site that need fixing.

<div role="alertdialog" aria-modal="true" aria-labelledby="hold-title" aria-describedby="hold-text">
  <h2 id="hold-title">Need more time?</h2>
  <p id="hold-text">Your cart is held for 2 more minutes.</p>
  <button type="button" id="hold-extend">Give me 15 more minutes</button>
</div>

This is the shape of a warning, with example times. Move keyboard focus to the button when it opens and back to where the person was when it closes. Most shop and booking platforms build this for you, so check theirs before adding your own.

4. Sale pop-ups and sticky bars

Our cookie banners, pop-ups and chat widgets guide has the full pop-up checklist.

5. "Added to cart" and "Code applied" messages

When someone adds a gift to the cart or applies a discount code, the page often updates a small number or shows a message without moving focus. Screen reader users hear nothing. Put these messages in a status region so they're announced (4.1.3 Status Messages).

<p role="status" id="cart-status"></p>
<script>
  // after the item is added or the code is accepted:
  document.getElementById("cart-status").textContent =
    "Added to cart: Gift card, $50. Cart total: 2 items.";
</script>

The product and amount are example text. Keep the status region on the page from the start and only change its text. If a code is rejected, say why in text ("This code expired on November 30") next to the field.

6. Where to change this on common platforms

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

Common mistakes

A 10-minute check before your sale goes live

  1. Read the sale page without looking at the timer or banner images. Is the offer and the end date clear in text?
  2. If there's a countdown, can you hide or stop it? Does it blink?
  3. Close the sale pop-up using only the keyboard (Tab to the close button, Enter, or Escape). Does focus land somewhere sensible?
  4. Tab through the cart and checkout with the sticky bar showing. Can you always see where focus is?
  5. Add an item and apply a code with a screen reader on (VoiceOver or TalkBack). Do you hear a confirmation? See our screen reader test.
  6. Start a checkout or booking and wait. Do you get a warning and a way to add time before the hold runs out?

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. It can flag a pop-up close button with no name, buttons and fields without labels, and low contrast in text on announcement bars. It can't tell whether a timer can be paused, whether a cart hold warns people, whether a pop-up traps the keyboard, or whether "Added to cart" is announced, which is why the 10-minute check above matters. Our Fix-Pack reports include copy-paste fixes for your platform for what the scan finds.

Related: online store checkout, cookie banners, pop-ups and chat widgets, animation and motion, website accessibility checklist.

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.

Listing events or selling tickets? See events calendar, registration and ticket pages.

Have an "Are you 21?" pop-up? See age gate accessibility.

Posting holiday hours or a closure notice? See announcement bars, holiday hours and closure notices.

Adding a newsletter or text-message signup box? See email newsletter and SMS signup forms.

Running a Black Friday or holiday sale? See promo codes, sale prices and sale banners.

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

  1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
  2. $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.