JAWS reads removal of DOM node within an `aria-live` region only in IE

The live region is:

<div aria-live='assertive' id='abc'> </div>

In JavaScript, the first change I make is to

document.getElementById("abc").innerHTML="<span>Processing</span>";

Next, I make another change:

document.getElementById("abc").innerHTML="<span>Done</span>";

JAWS has no problem in Firefox and reads both "Processing" and "Done". But IE reads "Processing Removing Processing Done"

I understand that I am replacing a <span> with a new <span>. But how do I make JAWS ignore giving that update of removal?

Answers


The only way I have successfully defeated this bug in IE is to hide the element being deleted, add the new element, then later, remove the hidden element.


To understand this bug in IE, you have to look to the documentation for the aria-relevant attribute which specify which changes you want the screenreader to be notified.

See the following page in the Microsoft documentation: aria-relevant attribute

In your case, IE considers (falsely) that you are doing a text update (because of the use of innerHTML which is considered as a string), so it notifies deletion and addition:

Updates are announced only as nodes are added, or as text is added or removed.

The solution should be to add or remove with the use of addChild() and removeChild() functions.


Need Your Help

List of all street and road names in Google in API

android google-maps-api-3 gps

Am doing a location based app.When using GPS, it provides with street names from Google API. When user need to enter it manually, for a autocomplete text view am in need of names of all street and ...

What's the best way to validate an XML file against an XSD file?

java xml validation xsd

I'm generating some xml files that needs to conform to an xsd file that was given to me. What's the best way to verify they conform?