4

I have a timer that handled by js to decrease from 59 to 0 every seconds. I'm using aria-live to detect the changes. However, the screen reader keeps repeating everytime element is changed.

How could I make a screen reader announces the timer for the first time it was rendered only?

PN Ngoc Quynh
  • 51
  • 4
  • 3
    add the `aria-live` section separately and hide it, then in your JS just add a line to update the `aria-live` region once you initialise the timer. However I do wonder why you would only want to announce a timer once? Without knowing your use case it is difficult to give advice but would you not want to announce at least every 5 seconds or something? – GrahamTheDev Sep 06 '21 at 14:13
  • 1
    Thanks, I'll try to handle by JS as your suggestion. For your question, the user reported that screen reader announces every seconds cause annoyance, and the message goes with timer is quite long also; hence, I think making the screen reader only announces for the first time is OK for this case. – PN Ngoc Quynh Sep 06 '21 at 14:41
  • 1
    Sorry I wasn't clear, but I meant what is the timer for. As this is a message it depends on what that message is (i.e. if it is a "log out" message due to inactivity, you would want it to announce every few seconds, if it is just some kind of toast message then one announcement will be fine!). Also bear in mind that anything with a timer needs to have an option to extend if it is a critical function as per WCAG (can't remember which SC it is but it is "timings" if you want to look for it). – GrahamTheDev Sep 06 '21 at 15:23
  • 1
    FYI, there is a popup that will display when login session has one minute left. The popup contains timer and message to notify user. – PN Ngoc Quynh Sep 06 '21 at 15:36
  • 1
    So that is as I said, you need to notify every 5-10 seconds (same technique with separate `aria-live` region and a counter in your timer loop). Also not that you need a settings screen somewhere to extend the session time to be fully WCAG compliant as I mentioned in previous comment. – GrahamTheDev Sep 06 '21 at 17:50

2 Answers2

4

What I've done before is have a visually hidden container (<div> or <span>) that has aria-live and I only update that container every XX seconds. I also have a visual container that's updated every second to countdown from 59 to 0. This allows me to control how often the timer is announced.

Depending on your situation, you might want to update the live container every 15 seconds (at 60, when first displayed, at 45, 30, and 15). Then maybe at 10 and 5. Then perhaps every second below 5.

To create a visually hidden container, see What is sr-only in Bootstrap 3?. (You don't need Bootstrap. You can just copy the CSS definition and use it directly.)

slugolicious
  • 15,824
  • 2
  • 29
  • 43
1

From your description in the comments, it sounds that you're building a popup banner or notification to inform a user when their session is about to expire. So, while it's definitely not ideal to have a screen reader announce the timer every second, you also can't only announce this once when it first appears. What if the user is typing when the notification appears and their keystrokes interrupt the notification? What if the user has momentarily stepped away from their computer and returned, but have missed the initial notification?

I agree with Graham's suggestion: use JavaScript to update the aria-live region every 5-10 seconds as the timer counts down. Alternatively, you could also use role="alert" to force the announcement, removing the role="alert" and adding it back every 5-10 seconds (WCAG recommends at least 20 seconds). Either way, the user must be informed that their session is going to expire and must be given the option to extend their session. This falls under WCAG 2.1 guideline 2.2.1: Timing Adjustable.

George Chapman
  • 462
  • 2
  • 9