VUE-js Accessibility for b-spinner -- audio announcement of data loading using Aria that REPEATS every 3 seconds

Question

I am trying to add accessibility for the audio announcement of "data loading" when a spinner is visually showing that the data is loading. Obviously, I am looking for an audible announcement, ideally one that would automatically play WITHOUT having to click on anything. My goal is to hear the announcement automatically and have it repeat every 3 seconds while loading.

The code below does produce a working announcement automatically. However, the goal of having it REPEAT EVERY 3 SECONDS (OR 10 seconds or whatever) has NOT been achieved.

Earlier stage: For people searching on this, I found that putting a tabindex = "0" into the code for that at least allowed some audio to proceed (which at that point was progress), but one has to tab to the element to hear the announcement. This can be viewed as undesirable. Furthermore, a person recommend not using the tabindex = 0 idea, please see my follow-up question: For vuejs, using an aria label, will a screen-reader llive NVDA automatically read it

The element is b-spinner and example markup code would be:

 <b-spinner id = "myspinny" small variant="primary"
               show.bind="isLoading"
               role="alert"
               aria-busy = true;
               aria-live="assertive"
               aria-atomic="true"
               aria-label = "Data is loading.  Please wait for the load to finish."
               label="Searching, please wait for the specific data load" @click="myspinny"
               alt="Processing... please wait for the specific data load"
               title= "Data Loading"
               v-if="resultsBusy">
  </b-spinner>

The above markup syntax compiles, the spinner still runs, and there is a real audio announcement in NVDA (presumably a similar tool like JAWS would have the same result). However, the FINAL GOAL is to have it REPEAT EVERY 3 seconds.

Also, the above markup might have some elements that are not used/needed.

I would like to get an audio announcement at least once (achieved now), but the ultimate goal would be to have an announcement every 3 seconds that will stop when the page is loaded (much like the spinner).

NOTE: I saw an accessibility related-web-page: https://bootstrap-vue.org/docs/components/spinner for this that recommended using a nested element, but there isn't a real syntax example that I saw. Also, other similar questions on stack overflow don't deal with the b-spinner element as such but a element.

There is a detailed design for this here. Unfortunately, as of this edit [11/15/2021], I personally can't get the solution from that link to work in my vue setup (which is vue version 2).

Answer 1

I understand the need to try various ARIA attributes and roles but sometimes that complicates things. When using ARIA, it's best to keep it minimal. For example, you have role="alert" and aria-live="assertive". The alert role gives you an implicit assertive live region.

Assertive regions might clear other screen reader announcements. From the spec:

User agents or assistive technologies MAY choose to clear queued changes when an assertive change occurs.

So it could be possible that you posting a message every 3 seconds might clobber other announcements. Perhaps not likely but theoretically possible.

My general rule of thumb is to use aria-live="polite" unless your announcement is so important that the user needs to drop everything they're doing and listen to it.

Using pure html and not vue.js, the following will make an announcement every 3 seconds.

<div aria-live="polite" id="mymessage"></div>
<button onclick="myclick()">start annoying message</button>
<script>
  function myclick() {
    setInterval(myTimer, 3000);

    function myTimer() {
      document.getElementById("mymessage").innerHTML = 'still loading';
    }
  }
</script>

How to translate that to vue.js code, I'm not sure, sorry. But it gives you a template of what the goal should be.

You'd want to kill the timer when you're done, obviously.