A Countdown Clock on a Holiday Sale Page

Digits ticking above the sale

A shop's Boxing Day page opens with a large clock: days, hours, minutes and seconds, ticking down to the end of the sale. The products sit underneath.

The owner added it for urgency. To a shopper, it is the one thing on the page that moves, and the eye goes back to it every second.

It also leaves out the one fact a countdown is supposed to carry: when, exactly, the sale ends, and in whose time.

What moving digits do to a page

Movement draws attention whether the visitor wants it or not. A ticking clock beside product descriptions makes them harder to read, and the products are what the page is selling.

For people who find movement on a page distracting, including many with attention or reading difficulties, the clock can make the whole page hard to use.

The international accessibility guidelines, WCAG 2.0, ask that content which updates by itself alongside other content can be paused, stopped or hidden. A countdown in seconds is that kind of content.

What the clock can fail to say

The clock is usually a script that rewrites the digits every second. What reaches a visitor who cannot see it depends on how it was built:

• Every tick announced, when it is marked to report changes, so the screen reader talks over everything else.
• Nothing announced, when it is not, so the deadline exists only in the digits.
• Bare numbers read without labels, a string of figures with no units.
• An image or drawing with no text behind it at all.
• No time zone, which leaves every visitor to assume their own.

The last affects every shopper, not only those using assistive technology, and it is the easiest to fix.

The time zone nobody states

A sale ending at midnight means three different moments to shoppers in BC, Alberta and Ontario. Countdown scripts quietly choose one, and the visitor cannot tell which.

Some count to midnight on the visitor's own computer. A shopper in Ontario then sees the clock reach zero three hours before the sale really ends, and may abandon a basket that still qualified.

Others count correctly to midnight Pacific time but say only that the sale ends at midnight. A shopper in Alberta reads her own midnight and stops an hour before she needed to.

State the end in words

Put the end of the sale in one plain sentence high on the page: Boxing Day sale ends Sunday, December 28, at 9 p.m. Pacific time, which is 10 p.m. in Alberta and midnight in Ontario.

Ending at a time other than midnight avoids the question of which day midnight belongs to. Naming two or three other zones saves shoppers the arithmetic.

Use the same sentence in the email, on the banner and at the checkout. A screen reader reads it once, in order, like any other text, and it never needs to change.

Make the clock an extra

If the clock stays, it should support that sentence rather than replace it. Make it smaller, place it beside the sentence, and drop the seconds: days and hours are enough.

Update it once a minute at most, give it a pause or hide control, and keep it from announcing its changes. Better still, hide the digits from screen readers, since the sentence already says it.

Have it count to a fixed moment in Pacific time, set in the code, rather than to midnight on the visitor's computer.

On a phone

On a phone, a large clock can fill the first screen by itself, pushing the products and the end date further down.

A ticking script also keeps the phone working the whole time the page is open. A single line of text costs nothing to show.

Before the sale opens, look at the page on a phone held upright, and note what fills the first screen.

When the clock runs out

At the end of the sale, the page should say plainly that the sale has ended, and what comes next. A clock frozen at zero, or showing negative numbers, looks broken.

A clock that starts again for each new visitor is worse. Shoppers notice, and from then on the deadline, and the rest of the page, carries less weight.

A worked example

An electric bike shop in Squamish sells bikes in its showroom and ships conversion kits, batteries, lights and panniers across Canada from its online store.

Last year's Boxing Day page led with a large countdown in seconds. A customer in Ontario emailed to say the sale had ended early.

Another customer, who uses a screen reader, phoned because the page kept reading out numbers. The clock counted to midnight on each visitor's computer and announced every change, and neither problem showed on the owner's screen.

This year the banner states the end in words: Sunday, December 28, at 9 p.m. Pacific, 10 p.m. in Alberta, midnight in Ontario. The same line appears in the email and at the checkout.

A small clock beside it shows days and hours, counts to that fixed moment, is hidden from screen readers and can be switched off. Shoppers everywhere read one deadline, and the products have the page's attention again.

The counter-case

A short sale lasting a few hours is different. When the time left is the whole message, a clock can show it more clearly than a sentence.

The sentence with the date, time and time zone still belongs beside it, the seconds can go, and the clock should not talk over everything else on the page.

A clock that helps is quiet, accurate and secondary. A clock that dominates the page sells the deadline instead of the products.

Before the Boxing Day page goes up

1. Write the end of the sale as a sentence with the time zone.
2. Add the time in Alberta and Ontario.
3. Use that sentence in the email, banner and checkout.
4. Shrink the clock and drop the seconds.
5. Count to a fixed moment, not the visitor's midnight.
6. Hide the digits from screen readers and add a pause.
7. Replace the clock with a message when the sale ends.

Step one matters most. A sentence with the date, time and time zone works for every visitor, on every device, with or without the clock.

Sale banners that say up to half off deals with what the sale's headline itself may promise, and why the website, email and store signs should agree.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.