E-mail List Archives
Thread: Marking up a countdown timer
Number of posts in this thread: 7 (In chronological order)
From: Romaric Pascal
Date: Tue, Sep 08 2020 7:44AM
Subject: Marking up a countdown timer
No previous message | Next message →
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/)
From: Swift, Daniel P.
Date: Tue, Sep 08 2020 8:27AM
Subject: Re: Marking up a countdown timer
← Previous message | Next message →
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 ADDRESS REMOVED = > On Behalf Of Romaric Pascal
Sent: Tuesday, September 8, 2020 9:44 AM
To: = EMAIL ADDRESS 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/)
From: Romaric Pascal
Date: Tue, Sep 08 2020 10:40AM
Subject: Re: Marking up a countdown timer
← Previous message | Next message →
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 ADDRESS REMOVED = > On Behalf Of Romaric Pascal
> Sent: Tuesday, September 8, 2020 9:44 AM
> To: = EMAIL ADDRESS 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/)
> > > >
From: glen walker
Date: Tue, Sep 08 2020 4:23PM
Subject: Re: Marking up a countdown timer
← Previous message | Next message →
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.
From: Mitchell Evan
Date: Wed, Sep 09 2020 2:25AM
Subject: Re: Marking up a countdown timer
← Previous message | Next message →
Hi Romaric,
Many people with ADHD use the "pomodoro method" to help with time
management. Yet as a person with ADHD myself, I've seen some countdown
timers which distracted me from tasks and sometimes even caused me intense
stress.
Visual countdowns updating every second are common but they are not
actually an essential feature of time management. Feel free to contact me
off-list if you would like to explore other design options, such as
adjustable frequency of alerts, which could benefit all users.
Thank you for your inclusive design approach and your thoughtful questions!
Mitchell Evan, CPWA
linkedin.com/in/mitchellrevan <https://www.linkedin.com/in/mitchellrevan>
Twitter @mitchellrevan <https://twitter.com/mitchellrevan>
+49 1525 8950540
+1 510 375 6104
---------- Forwarded message ----------
> From: Romaric Pascal < = EMAIL ADDRESS REMOVED = >
> To: " = EMAIL ADDRESS REMOVED = " < = EMAIL ADDRESS REMOVED = >
> Cc:
> Bcc:
> Date: Tue, 08 Sep 2020 13:44:09 +0000
> 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/)
>
>
From: Romaric Pascal
Date: Wed, Sep 09 2020 8:13AM
Subject: Re: Marking up a countdown timer
← Previous message | Next message →
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 ADDRESS 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.
From: jpi4a11y
Date: Thu, Sep 10 2020 6:03AM
Subject: Re: Marking up a countdown timer
← Previous message | No next message
Hello Romaric And all,
To me, regardless of the tools used, accessibility is mostly about communication.
Questions
' How does a screen reader user know the timer control you're implementing exists on the screen?
' How can this control be navigated to easily?
I think you're on the right track.
' As a screen reader user, making me aware of this control and putting it into a semantic element would be primary.
' If you can leverage the built in structure like landmarks, I could quickly and easily access the control as needed
' As I get older, I find adding app/page -specific navigation/shortcuts to my experience adds unnecessary cognitive load: adding one more thing I probably won't remember, and will cause more frustration as I try to remember that special keystroke in one of the 1000's apps/pages I encounter regularly. It may be great for branding, but this could be an anxiety builder for your users.
HTH,
== Joel Isaac