I'm in the process of making a React app as accessible as possible. However, I'm noticing some weird behavior with NVDA - I have two live regions which I just cannot get NVDA to announce correctly. On Voiceover, everything works smoothly with these.

First there is a notification ponent, which has generated HTML like this. NVDA doesn't announce the notifications, Voiceover does:

<div aria-live="polite" aria-hidden="true/false">
  <article> <-- There might be many of these if there's multiple notifications, and there's none of these if there's no notifications
    <div>
      <div type="alert">
        <div>
          <div>The text here should be announced when shown</div>
        </div>
      </div>
    </div>
  </article>
</div>

If I remove aria-hidden from the first div, NVDA reads it, but it gets unreliable on Voiceover. Inside the first div, there is a PoseGroup ponent too, just doesn't show up on generated HTML.

EDIT: I managed to get this working by wrapping the whole thing into yet another div with aria-live="polite". A little hacky solution but what you know... If someone has better solution, I'm listening.

Then there's a live chat, which has HTML like this:

<div>
  <ul aria-live="polite"> <-- There are multiple of these depending on number of elements, but always at least one
    <li aria-hidden="true/false"> <--- There are many of these, some hidden from screen reader depending on the ponent, these are messages, timestamps etc, some of them should be read
      <div>
        <span>
          <div>
            <p aria-hidden="true">Visible message text</p>
            <p aria-hidden="false">Hidden visibility, but contains additional information to screen reader and should be read always</p>
         </div>
        </span>
      </div>
    </li>
  </ul>
</div>

Here, I'm using multiple aria-live containers which are spawned when there are enough messages on the former one, this is due to Voiceover stopping the reading when there are too many elements, and this solution works with it. It should be also noted that there is a PoseGroup ponent wrapping the li elements, it doesn't show on the generated HTML. The li elements should only read the messages, no timestamps etc, that's why they have aria-hidden. No matter what I tried, NVDA doesn't read any of these. Voiceover works perfectly with this kind of code. I have tried to convert the ul and li's to divs with no luck.

Then there's a form input ponent, which has an error label as a live region, goes like this:

<label>
  <span>Some text</span>
  <input/>
  <div aria-live="polite">
    <span>This span is conditionally shown if there's an error.</span>
  </div>
</label>

This ponent however, works perfectly like this on both Voiceover and NVDA, and I just cannot get my head around why the other two don't. Sure, they're more plex, but shouldn't it work on NVDA too since Voiceover does it without any difficulty?

I still consider myself as an accessibility noob, and been banging my head against a wall for couple of days.

I'm in the process of making a React app as accessible as possible. However, I'm noticing some weird behavior with NVDA - I have two live regions which I just cannot get NVDA to announce correctly. On Voiceover, everything works smoothly with these.

First there is a notification ponent, which has generated HTML like this. NVDA doesn't announce the notifications, Voiceover does:

<div aria-live="polite" aria-hidden="true/false">
  <article> <-- There might be many of these if there's multiple notifications, and there's none of these if there's no notifications
    <div>
      <div type="alert">
        <div>
          <div>The text here should be announced when shown</div>
        </div>
      </div>
    </div>
  </article>
</div>

If I remove aria-hidden from the first div, NVDA reads it, but it gets unreliable on Voiceover. Inside the first div, there is a PoseGroup ponent too, just doesn't show up on generated HTML.

EDIT: I managed to get this working by wrapping the whole thing into yet another div with aria-live="polite". A little hacky solution but what you know... If someone has better solution, I'm listening.

Then there's a live chat, which has HTML like this:

<div>
  <ul aria-live="polite"> <-- There are multiple of these depending on number of elements, but always at least one
    <li aria-hidden="true/false"> <--- There are many of these, some hidden from screen reader depending on the ponent, these are messages, timestamps etc, some of them should be read
      <div>
        <span>
          <div>
            <p aria-hidden="true">Visible message text</p>
            <p aria-hidden="false">Hidden visibility, but contains additional information to screen reader and should be read always</p>
         </div>
        </span>
      </div>
    </li>
  </ul>
</div>

Here, I'm using multiple aria-live containers which are spawned when there are enough messages on the former one, this is due to Voiceover stopping the reading when there are too many elements, and this solution works with it. It should be also noted that there is a PoseGroup ponent wrapping the li elements, it doesn't show on the generated HTML. The li elements should only read the messages, no timestamps etc, that's why they have aria-hidden. No matter what I tried, NVDA doesn't read any of these. Voiceover works perfectly with this kind of code. I have tried to convert the ul and li's to divs with no luck.

Then there's a form input ponent, which has an error label as a live region, goes like this:

<label>
  <span>Some text</span>
  <input/>
  <div aria-live="polite">
    <span>This span is conditionally shown if there's an error.</span>
  </div>
</label>

This ponent however, works perfectly like this on both Voiceover and NVDA, and I just cannot get my head around why the other two don't. Sure, they're more plex, but shouldn't it work on NVDA too since Voiceover does it without any difficulty?

I still consider myself as an accessibility noob, and been banging my head against a wall for couple of days.

• javascript
• accessibility
• voiceover
• screen-readers
• nvda

Share Improve this question Follow edited Jul 23, 2020 at 7:29 Mika Laaksonen asked Jul 23, 2020 at 4:54 Mika LaaksonenMika Laaksonen 3111 silver badge33 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Live regions are a well supported and mature accessibility tool, but they aren't the most intuitive thing. It's possible that you may be using them incorrectly.

Live regions are only announced when the content changes. If there's content present in the live region at the time of page load, it won't be announced unless that content changes.

I'm not sure if you're using aria-hidden as a toggle to show/hide content in the live region, but if so, that's probably the source of your problems. Your third example isn't using this technique, and it seems to be the one working.