Accessibility: JAWS doesn't pronounce aria-live polite or assertive for *ngIf

Question

I'm using Angular, and every time when isVisible from the code below becomes true the html code below gets rendered on the page.

<div *ngIf="isVisible">
  <span aria-live="assertive" aria-atomic="true">Read this new text</span>
</div>

Every time it gets rendered (can be removed and added several times based on behavior), I need JAWS to pronounce the text in the span: Read this new text. For that purpose I tried to use aria-live="polite" (doesn't pronounce) and even aria-live="assertive" and even aria-live="assertive" with aria-atomic="true" based on this Aria-live region is not reading out updates when an element is removed on chrome question.

How to make it work? Used: JAWS, Google Chrome.

Answer 1

Adding or removing live regions is not working well, you should manipulate only the contents of such a region.

<div aria-live="assertive" aria-atomic="true">
  <span *ngIf="isVisible">Read this new text</span>
</div>

Whether assertive is the right choice should be very carefully considered. It is quite disruptive for the user. polite is the better choice most of the time.

When regions are specified as assertive, assistive technologies will immediately notify the user, and could potentially clear the speech queue of previous updates.

– ARIA on aria-live

Another general advise is that the information that gets announced needs to be easily accessible on the user’s terms as well, should they have missed it or not understood. The error message for a field should be announced via an alert, but also be bound to the input field, to be read every time the user focuses the field.