WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Marking up a countdown timer

for

From: Swift, Daniel P.
Date: Sep 8, 2020 8:27AM

What about implementing a keyboard shortcut along with a message when the page loads? For SR - "There is a timer on this page for X - press CTRL-9 (random) to hear how much time is remaining"?

Daniel Swift, MBA
Senior Web Specialist
University Communications and Marketing
West Chester University
610.738.0589

From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Romaric Pascal
Sent: Tuesday, September 8, 2020 9:44 AM
To: <EMAIL REMOVED>
Subject: [WebAIM] Marking up a countdown timer

Hello all,

I'm trying to implement a pomodoro timer accessibly. I'm a bit stuck when it comes to marking up the time countdown in HTML to provide a good experience to screen-reader users.

Especially, I'm thinking of how sighted users can glance at the remaining time to quickly get how long is left. I'm wondering how to make it easy for screen-reader users too.

So far I've identified two options (discarding an `aria-live` region, as the aim is to focus, not be spammed of every second passing):
- using a read-only input to display the time. This would make the element holding the time focusable and I'm hoping screen-readers have a way to re-announce the element being focused on demand.
- adding an "How much time left" button that would trigger an announcement. Users could keep the focus on it and trigger as needed. I could add a visual emphasis on the time so something happens for sighted users

Is there a "better" option among those? But maybe I'm overthinking things and simply marking it up as text would be enough.

Thanks!

--
Romaric Pascal
[http://romaricpascal.is<;http://romaricpascal.is>;](http://romaricpascal.is/)