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.

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.
aria-live="assertive" doesn't really interrupt the current flow to announce the message.
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:
```

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

```
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?

Live regions should be on the page at load. Do you have URL where I can test your example? — aardrian, Jan 13 '17 at 13:48
Even when I dump messages to single live region, that live region is created dynamically when first such message arrives. — Gaurav Deshmukh, Jan 13 '17 at 14:27
You must have a live region on the page at load. Can you make a demo page, perhaps a CodePen? Then I can test it and correct your code. — aardrian, Jan 13 '17 at 14:33
http://codepen.io/anon/pen/dNXRzQ See above codepen. On clicking first button, message will never be read because live region is behind the ko condtion. Second button shows my approach using first method in question. You can see that first time the message is not read out. Second time onwards, messages are read. — Gaurav Deshmukh, Jan 13 '17 at 15:24
FWIW, the codepen example works fine with JAWS and VoiceOver (iOS). Both XYZ and Devil are announced the first (and subsequent) times they're updated. JAWS works in Firefox, IE, and Chrome. Voiceover on Safari (didn't try chrome or firefox). NVDA doesn't work at all with XYZ and announces Devil the second time it's updated, as you mentioned. — slugolicious, Jan 13 '17 at 16:03
Am getting same thing as @slugolicious reports in NVDA 2016.4 / FF 50.1.1. Forked your pen so I can test in debug mode: http://s.codepen.io/aardrian/debug/wgWqVm — aardrian, Jan 13 '17 at 16:40

score 1 · Answer 1 · answered Jan 13 '17 at 16:54

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.

Behavior of NVDA

1 Answers1