Can a screen reader be “locked” within a DIV element?

Question

I've written a site that uses jQuery to display a modal popup. It essentially covers the entire viewable area of the screen with an overlay, then shows a DIV that contains the actual popup on top of the overlay. One of the requirements for this project has to do with accessibility.

We've been able to get focus inside the modal when it pops up so that the screen reader stops what its doing and starts reading inside the modal. However, our current problem is that once the JAWS screen reader finishes reading text within the modal window, it continues past that and reads text outside the window (underneath the overlay).

Is there any way to "lock" the screen reader inside a particular element so that it cant read anything outside of it?

Answer 1

If you add an attribute of:

aria-disabled="true"

to the rest of the site markup after you set focus in the modal, it should keep the screen-readers from reading that content. This is easiest to do if all of the other content is in a DIV and the model is added to the DOM as a sibling to that DIV (so you would only need to add that attribute onto one element).

Alternatively, if it is possible with your dialog, you could add some JavaScript tab-press/focus detection to keep the user in a loop within this dialog. If you can't get out of the dialog with a keyboard (baring pressing a close/cancel button), it should be generally accessible.