Behavior of NVDA

Question

I am trying to add live region support in a web page to make NVDA usable with the page. However, I have seen quite a different behavior with aria-live attributes than expected.

1. I have tried adding a single live region which is hidden and I dump all the messages (each message enclosed in <p> tag) into that region to be read by screen reader. It works fine, but the only problem is that the first message inserted into live region div is never read by the NVDA screen reader. Subsequent messages are read perfectly. This live regions div is created dynamically when the first message is to be announced.

2. aria-live="assertive" doesn't really interrupt the current flow to announce the message.

3. I am using knockout in web page. When HTML div, which is marked as live-region, is displayed based on knockout condition, then it is not detected by screen reader. For example:

    <!-- ko if: $data --> <div aria-live="polite" data-bind="text: $data"> </div> <!-- ko --> 

   When page is loaded initially, $data is null. So live-region div is absent. But when data is fetched that div gets inserted. However, NVDA doesn't read the content in added div. Is this expected behavior? Is there any workaround to fix this behavior?

Answer 1

Quick answer, pressed for time.

You must have your live region on the page at page render. This primes the browser to monitor it for updates. Adding the element after the fact only primes the browser, but does not trigger it.

I forked your pen and got it working in the first button (through the browser pronounces "XYZ" as "zeyes"). This is in debug mode so there is no CodePen code in there at all (nor frames) to jack it up:

http://s.codepen.io/aardrian/debug/wgWqVm

Non-debug mode so you cans see the code:

http://codepen.io/aardrian/pen/wgWqVm

Your code puts the aria-live on an element wrapped within a Knockout ko if: statement, so it is not rendered to the page at load:

<p>Last name: 
  <!-- ko if: lastName -->
    <strong aria-live="polite" data-bind="text: lastName"></strong>
  <!-- /ko -->
</p>

I tweaked it to put the live region around the ko if: check, and now it is announced when the button is pressed:

<p>Last name: 
  <div aria-live="polite">
    <!-- ko if: lastName -->
      <strong data-bind="text: lastName"></strong>
    <!-- /ko -->
  </div>
</p>

Yes, I put a <div> in a <p> , but that is only for demonstration purposes.

Tested in NVDA 2016.4 / Firefox 50.1.1 and it works as I believe you intend. I did not touch the second one at all.