Can a “screen reader” be “locked” inside a div element?

Question

I wrote a site that uses jQuery to display a modal popup. It essentially covers the entire visible area of ​​the overlay screen, and then shows a DIV that contains the actual popup on top of the overlay. One of the requirements for this project is related to accessibility.

We were able to get the focus inside the modal when it appears, so that the screen reader stops its action and begins to read inside the modal. However, our current problem is that after the JAWS reader finishes reading the text in the modal window, it continues to go through and read the text outside the window (under the overlay).

Is there a way to “block” a screen reader inside a certain element so that it cannot read anything outside it?

Answer 1

If you add an attribute:

aria-disabled="true"

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

, , / JavaScript, . ( /), .