complicated aria-live timer progress bar focus finished loading and message question

Question

I want to lay focus on changing content on my page. I want to use aria-live for this but I don't understand why it is not working. To figure it out I narrowed it out to a span:

<span class="message" aria-live="polite">Text 1</span>

And a line of jQuery that I run to change the text:

$('.message').text('Text 2');

The above line is called after a loading bar is at 100%. Full code:

/* @    -- Progressbar */
var timerCount = 0;
var lastCount = false;
var waitingTime = 10000; //ms
var waitingDevide = 100 / waitingTime;

function loadCalc() {
  if (timerCount <= waitingTime) {
    if (timerCount !== 0) {
      /* @    ---- If not first call */
      var currentPercentage = Math.round(timerCount * waitingDevide);
      $('.waiting-progressbar-bar').css({width: currentPercentage + "%"});
      $('.waiting-progressbar').attr('aria-valuenow', currentPercentage);

      if (currentPercentage === 100) {
        /* @    ------ When loading is done */
        finishedLoading();
      }
    }
    if (timerCount < waitingTime - 1000) {
      /* @    ---- Create Random Time for Realistic loader */
      var randomInterval = Math.floor(Math.random() * 11) * 100;
      /* @    ---- Call Function After Random Time */
      setTimeout(loadCalc, randomInterval);
      /* @    ---- Add Random Number to Counter */
      timerCount = timerCount + randomInterval;
    } else if (timerCount !== waitingTime) {
      var lastStep = waitingTime - timerCount;
      timerCount = timerCount + lastStep;
      setTimeout(loadCalc, lastStep);
    }
  }
}

loadCalc();

function finishedLoading(){
  $('.message').text('Text 2');
}

I made a jsFiddle of the above code: https://jsfiddle.net/studiovds/czdug5yn/14/show

Running this with my OSX Voiceover screen reader on doesn't read the changed content aloud?

What do you mean "lay focus on changing content on my page" - `aria-live` is for announcing items to screen reader users, if you are trying to manage focus this is not the way to do it. Could you clarify what you are trying to achieve? — GrahamTheDev, Jan 30 '21 at 00:02
Sorry, yes I am talking about the screen reader. What I want it to do is read the new text when it is added to the container. — Zebda, Jan 30 '21 at 00:38
Is this helpful? https://stackoverflow.com/questions/3670570/getting-screen-reader-to-read-new-content-added-with-javascript or https://stackoverflow.com/questions/38518164/accessibility-page-loader-indicator-using-aria-live or https://stackoverflow.com/questions/53083628/accessibility-when-data-is-loaded — react_or_angluar, Jan 30 '21 at 15:36
Hhmm not really they all use aria-live like I do but the strange thing is this just doesn't work for me. — Zebda, Jan 30 '21 at 15:46
How does it not work for you? Is aria-live the problem? What is strange? — react_or_angluar, Jan 30 '21 at 17:21
The screen reader is not reading the new text shown in the span. I made a jsfiddle of my code. Opening this with my OSX Voiceover Screen Reader on the text inside the aria-live element isn't read aloud. I added the link to jsFiddle to the original question. — Zebda, Jan 30 '21 at 21:10
Testing some more I am wondering if the problem might be I just don't understand VoiceOver on my mac enough. A new jsFiddle does work with basically the same code. The difference is that in the none working tests the screenreader doesn't start reading the pages content, when it does work the screenreader first starts reading the pages content. Hhhmm I'm going to read a bit more about the screenreader functions. — Zebda, Jan 30 '21 at 21:19

complicated aria-live timer progress bar focus finished loading and message question

0 Answers0