COUNT DOWN TIMERS

Provide Control Over Time Limits

Any countdown timer that imposes a time limit on user activity must include mechanisms for users to control that limit.

Options for Timer Control (Choose At Least One)

• Users must be able to turn off the time limit before encountering it

• Users can adjust the time limit before encountering it to at least ten times the default setting

• Users can extend the time limit with a simple action (like clicking a button) that gives them at least 20 seconds to respond before the timer expires.

When Control Is Not Required:

If the timer is for an event happening in real-time (like an auction, live webinar countdown, or actual event start time), control mechanisms are not required because the timing is essential to the activity itself. However, the timer display should still be accessible to screen readers. Timers longer than 20 hours do not require control mechanisms.

Implementation for Website Builders:

Look for countdown timer components or plugins that include built-in "pause," "extend time," or settings to turn off timers. If your timer is for a flash sale or promotion, ensure it does not force the user to complete a purchase within the countdown—it should only display when the sale ends, not control user actions.

Provide Pause or Hide Options for Non-Essential Timers

If your countdown timer is purely informational (showing when a sale ends, rather than forcing an action) and updates automatically, users must be able to pause, stop, or hide it.

The Five-Second Rule:

Any moving, scrolling, blinking, or auto-updating content that lasts longer than five seconds must include a mechanism for users to pause, stop, or hide it. This applies to countdown timers that continuously update on the screen.

Visual Distraction:

Constantly ticking timers can be severely distracting for users with attention disorders, cognitive disabilities, or anyone trying to focus on reading product details or completing a form. A simple pause button near the timer gives users control over potential distractions.

Design for Screen Reader Accessibility

Countdown timers present a unique challenge for screen readers: they need to communicate time information without constantly interrupting the user.

• Do NOT configure your timer to announce every second or minute change. This creates an unbearable experience for screen reader users who cannot focus on anything else while the timer continuously interrupts their reading or form completion.

• Configure screen reader announcements to occur only at meaningful intervals—such as when 5 minutes remain, when 1 minute remains, or when 30 seconds remain. This keeps users informed without overwhelming them.

• Ensure screen reader users can easily find and check the timer whenever they want. Consider marking the timer with proper semantic structure (like a heading or landmark) so users can quickly navigate to it using screen reader shortcuts without waiting for an announcement.

• When the timer does announce, include context. Instead of just "3 minutes 42 seconds," the announcement should say "Time remaining: 3 minutes 42 seconds" or "Sale ends in 3 minutes 42 seconds."

Ensure Visual Clarity

The timer display itself must meet basic accessibility requirements for visibility and readability.

• Sufficient Color Contrast:

  Timer text must maintain at least a 4.5:1 contrast ratio against its background. Never rely on color alone to indicate urgency (like turning red when time is running low)—pair color changes with text like "Hurry!" or an icon.

• Readable Size:

  Timer text should be large enough to read easily, especially since users may be glancing at it repeatedly while completing a task. Avoid tiny timer displays that strain vision.

• Clear Visual Design:

  Use a simple, clean format that's easy to scan at a glance. Formats like "5:30" or "5 minutes 30 seconds" are clearer than overly stylized or abbreviated displays.