WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Marking up a countdown timer

for

From: Romaric Pascal
Date: Sep 8, 2020 10:40AM

Thanks. I think that would leave behind users of phone screen readers, though, as they'd have no way to trigger the shortcut.

I also believe the shortcut would need to be customisable to avoid clashing with user's pre-existing shortcuts.

I'm hoping there's a way to use built-in semantics and screen reader features to add little code and reach many :)

-------- Original Message --------
On 8 Sep 2020 15:27, Swift, Daniel P. wrote:

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