Alert assistive technology about div's visibility change BUT not about later updates

Question

In our website when you have only 4 minutes left until your session ends, an alert is displayed at the top of the page informing you about it.

We wanted to make this alert accessible for disabled users and therefore I used role="alert".

The problem is that the message inside this div says something like "You have time left: 3:58" and the time constantly changes (every second it's updated). As a result, when the div is made visible, the user hears something like "alert; you have time left 4:00, 3:59, 3:58, 3:57..." and it goes like this forever. How can I solve it so that the message is read once ("you have time left: 4:00") and then the updates aren't announced anymore?

My html:

<div role="alert">
<span>You have time left:</span><span>4:00</span>
</div>

Answer 1

You can use something like the a11yfy live announcer https://github.com/dylanb/a11yfy/blob/master/announce.md#jquerya11yfyassertiveannounce

To announce the change when it occurs and then there is no need for the alert role.

a11yfy can be downloaded using Bower