CODEWITHSUNDEEP
wai-ariawcag2.0
itjayaprakash
itjayaprakash

Reputation: 85

Aria-live="polite" does not read in proper order on NVDA Screen Reader?

aria-live screen reader reading is not in a proper order 

Example:

<div id="one"    aria-live="polite">TEST 1</div> 
<div id="two"    aria-live="polite">TEST 2</div> 
<div id="three"  aria-live="polite">TEST 3</div>

screen reader reading like:"TEST 2 TEST 1 TEST 3" it reads randomly but content are updating using javascript in proper order

Upvotes: 1

Views: 1486

Answers (1)

GrahamTheDev
GrahamTheDev

Reputation: 24825

As suspected the problem you have is that you are sending multiple updates at the same time.

I am not sure of why this behaviour exists (I guess it is due to some polling mechanism in the screen reader that listens for page changes and then queues them up, with a microsecond delay it could be that it 'fires up', sees the second update and immediately adds that to the queue (as the first as already occured) then sees that other updates have happened and adds them to the message queue. Just speculation, it could even be a browser micro optimisation on simultaneous updates.

To add further to this my computer starts with update 3 and then reads 1 and 2 - whereas my old laptop starts at 2 and then reads 1 and 3, so I am guessing it is a timing issue linked to CPU performance.

The fiddle below shows that with a slight delay between updates it works as expected.

Obviously I am not suggesting this fiddle is how to do it in production!

Instead I would create a global 'messages queue' function that accepts messages and then updates the relevant element with a slight throttling between messages (100ms should be plenty and fast enough that it doesn't leave gaps between messages even at fastest speech rates).

This would be a global queue, a function to add a message and then some function that throttles the responses (and shuts itself off if there are no messages to update to save CPU cycles, reactivating if a message is added).

Sadly the functions I use to do this are tied to loads of helpers all over the place and it is too difficult for me to extract them for an example so you will have to write that yourself.

function buttonStart(e) {
        document.getElementById('one').innerHTML    = "Button Description A TEST 1";
        document.getElementById('two').innerHTML    = "Button Description A TEST 2";
        document.getElementById('three').innerHTML  = "Button Description A TEST 3";
    }


function buttonStart2(e) {
  document.getElementById('one').innerHTML    = "Button Description  TEST 1";
    window.setTimeout(function(){
      document.getElementById('two').innerHTML    = "Button Description  TEST 2";
    },100);
    window.setTimeout(function(){
      document.getElementById('three').innerHTML  = "Button Description  TEST 3";
    },200);
        
        
        
    }
        #accessbile {
            overflow: hidden;
            min-width: 0px;
            max-width: 0px;
            position: absolute;
            left: -20000px;
        }
    <button onclick="buttonStart()">START</button>
    <button onclick="buttonStart2()">START 2</button>

    <div id="accessbile">
        <div id="one"   aria-live="polite"></div>
        <div id="two"   aria-live="polite"></div>
        <div id="three" aria-live="polite"></div>
    </div>

Upvotes: 2

Related Questions