eBay MIND Patterns
  • Introduction
  • Messaging
    • Alert Dialog
    • Confirm Dialog
    • File Preview Card
    • Form Validation
    • Inline Notice
    • Input Meter
    • Input Validation
    • Page Notice
    • Star Rating (static)
    • Time
    • Toast Dialog
    • Tourtip
  • Input
    • Button
    • Checkbox
    • Chips Combobox
    • Combobox
    • Date Picker
    • File Input
    • Input Dialog
    • Listbox
    • Listbox Button
    • Menu
    • Menu Button
    • Phone Input
    • Radio
    • Select
    • Star Rating (interactive)
    • Switch
    • Toggle Button
    • Toggle Button Group
  • Navigation
    • Breadcrumbs
    • Fake Menu Button
    • Fake Tabs
    • Link
    • Pagination
    • Skip Navigation
    • Tile
  • Disclosure
    • Accordion
    • Carousel
    • Lightbox Dialog
    • Details
    • Flyout
    • Footnote
    • Infotip Button
    • Panel Dialog
    • Pulldown List
    • Segmented Buttons
    • Tabs
    • Tooltip
  • Structure
    • Description List
    • Form
    • Heading
    • Image
    • Item Tile
    • Layout Grid
    • Region
    • Table
    • Table Cell
  • Techniques
    • Active Descendant
    • Ambiguous Label
    • Background Icon
    • Keyboard Trap
    • Live Region
    • Offscreen Text
    • Roving Tabindex
    • Skip to Main Content
    • Alternative Text
  • Anti-Patterns
    • Disabling Pinch-to-Zoom
    • Hand Cursor on Buttons
    • JavaScript HREF
    • Layout Table
    • Mouse Hover on Static Elements
    • Open New Window
    • Setting Focus on Page Load
    • Tabindex-itis
    • Title Tooltip
  • Appendix
    • ARIA Essentials
    • Checklist
    • FAQ
    • Keyboard Interface
    • Known Issues
    • Legacy Patterns
      • Fullscreen Dialog
    • MIND Pattern Template
    • Pattern Naming Scheme
    • References
    • Utilities
Powered by GitBook
On this page
  • Introduction
  • Working Examples
  • Best Practices
  • Interaction Design
  • Developer Guide
  1. Messaging

Time

Clocks, stopwatches & timers.

PreviousStar Rating (static)NextToast Dialog

Last updated 4 months ago

Introduction

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

For sighted users, a clock, timer 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

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 "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.

Experience the pattern in action on our companion .

eBay MIND Patterns examples website
Time left on eBay auction page