Time

Even a stopped clock is right twice a day.
Time left on eBay auction page

Introduction

Time-based patterns can be used to indicate the elapsed time from a start point (stopwatch), the time remaining until an end point (countdown), or simply the current time (clock).

For sighted users, a clock, countdown or stopwatch will update every second visually. For non-sighted users we must be careful not to convey this 'ticking' of the timer aurally,

Working Examples

You can take a look at the page notice pattern in action on our examples site.

Best Practices

Screen reader must not announce updates every second because this creates too much noise and distraction.

We must audibly convey only the most important thresholds. For example "Less than 30 seconds left".

Announcements must be spaced at least 15 seconds apart. This will give the screen reader enough time to announce the new value, even on the slowest screen reader speech rate, in any language.

Interaction Design

Keyboard

As the time pattern contains no interactive elements, there are no specific call-outs for keyboard interaction.

Screen Reader

Without losing their current point of focus, the screen reader must be alerted of any critical points in the passage of time.

Developer Guide

The section is not yet available.