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?
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.)
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.
