Screen reader not reading toggling validation

Question

I am currently working on accessibility for an application and I am having a problem with getting the screen reader (JAWS 16) alerted when a the below invalid entry

<span class="input-group-addon">
    <span class="fa fa-exclamation fa-fw" role="alert" aria-invalid="true" aria-live="assertive"></span>
</span>

switches over to valid.

<span class="input-group-addon">
    <span class="fa fa-check fa-fw" role="alert" aria-invalid="false" aria-live="assertive"></span>
</span>

and back again to invalid.

The screen reader will say "alert" when the valid HTML appears but will not say "alert" or any audio feedback when toggling back to invalid.

Any assistance is greatly appreciated.

Thank you

Answer 1

Live region events are triggered by changes in visibility of content, changes in the child content of an element and addition of a live region to the DOM. The mechanics are detailed in the Core Accessibility API specification It is my understanding that the changing of an attribute value such as aria-invalid="true|false" will not fire a live region event.

This article may be helpful in understanding role=alert: ARIA role=alert browser support Please note: It is 3 years old and hopefully browser support has improved since it was written.