WebAIM - Web Accessibility In Mind

E-mail List Archives

Marking up a countdown timer

for

From: Romaric Pascal
Date: Sep 8, 2020 7:44AM

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/)