WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Marking up a countdown timer

for

From: Romaric Pascal
Date: Sep 9, 2020 8:13AM

Cheers! I'm very unsure of the aria-live option, in the context of a pomodoro timer. Even with a reduced, possibly dynamic rate, with the aim to get stuff done, each automatic announcement is an opportunity to lose precious focus. Not to mention potential stress it can induce for some people to be aware of the time elapsing (mentioned by Mitchell Evan in another reply), but that might be something to mitigate separately (as it would also need visual mitigations too).

I'm more looking for what's the a way to let users of screen-readers a quick access to the time, for a quick check. Only if they wish to do so, rather than have the app force the announcement on them (even at intervals they predefined).

Landmarks are on my radar. The app being the timer, there's so little markup that the time is pretty much the first thing in the `main` after the heading (which would provide another shortcut).

I'm looking at ways some way users could avoid having to navigate through their screen-reader landmark/headings shortcuts each time they want a time update, though. I was imagining leaving their focus somewhere (button, the time itself, something else) and triggering an announcement.

Not being a screen-reader user myself, I'm not quite sure if it involves me coding something (the JS that would populate an announcement by filling an aria-live region on activation of a button) or just picking the right elements and the screen-reader does the job for me (if there's a shortcut for re-announcing, and users are aware/use it at all). But maybe it's a non-issue and people would be just fine navigating from the nearest landmark/heading to access the time.

The `timer` role looks interesting in that respect, thanks for pointing it to me (wasn't aware of it at all). Does it translate to any feature in assistive technologies besides a different role being announced (for ex. separate shortcuts to timers on the page)?
--
Romaric Pascal
[http://romaricpascal.is](http://romaricpascal.is/)

‐‐‐‐‐‐‐ Original Message ‐‐‐‐‐‐‐
On Tuesday, 8 September 2020 23:23, glen walker < <EMAIL REMOVED> > wrote:

> I wouldn't rule out aria-live, just don't put it on the time element itself. You don't want to hear that announced every second.
>
> But you can have a secondary hidden element with aria-live that you update every 30 seconds (or some timespan) and it would announce when updated. It depends how long the timer is. For something like 5 minutes, I would probably update the secondary element every minute for the first four minutes. Then when it gets to 1 min, update it every 10 or 15 seconds. When it gets under 10 seconds, update every second.
>
> You'd have to work out the timespans and do some usability testing to get it right.
>
> If the displayed timer were in a landmark (region or complementary), then it would also be easy to navigate to with a screen reader so the user could check it whenever they want.