'How to get JAWS to update its cache of aria-hidden values

I have a webapp where we dynamically toggle the aria-hidden attribute on certain elements in response to user input. This seems to work fine with VoiceOver but apparently fails miserably with JAWS. When I set the value to true and then back to false, JAWS apparently doesn't realize that those elements should no longer be hidden and thus refuses to navigate to them.

I've put together a trivial jsbin example to show what I'm doing. Is there either a better way to do this, or something else I need to do when clearing the aria-hidden flag to convince JAWS to reload its state?

This example works as follows:

  • when you start off you can use the B key to navigate between the two buttons, wrapping back to the top.
  • When you press the button labeled "Toggle hidden state" it changes the aria-hidden flag on the other button between true and entirely absent.
  • After pressing it one time, using the B key reports that there is now only one button on the page, which is a feature.
  • However, when I press it a second time the button is still invisible to JAWS.

It appears to me (by using the Chrome developer tools) that the DOM element is properly updated. I presume that since the state was changed through Javascript rather than reloading the page this has confused the JAWS engine, but I'm not sure how to get beyond this. Any help would be most appreciated.

JSBin example

javascripthtmljaws-screen-reader


Solution 1:[1]

JAWS generates an XML representation of the DOM for virtual cursor navigation. Sometimes, this XML representation isn't updated as frequently as the page is updated (it depends on whether the event hooks in the native JAWS scripts fire on page load, and page update events).

There's a manual way to update the JAWS virtual DOM: Insert + Escape. This performs a screen refresh and should update the virtual document XML with the latest aria-hidden attribute values.

The alternative would be to write a JAWS script to watch for DOM changes, although that solution would be specific to your web app or web page.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 George Chapman

Related Questions