Can a screen reader be "locked" within a DIV element?

5
votes

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?

1
jqueryhtmlaccessibilityscreen-readersjaws-screen-reader
You know what I do when I see your website that has these absurd popups? I close the window. If I really want to read the content then I'll just right-click on the page and delete the element from webkit. "Techniques" like what you're doing just make the web worse and are profoundly annoying. Whatever problems you're facing, you're better off doing anything else that doesn't anger your readers. - Incognito
I appreciate your thoughts, however, not only are modal popups commonplace today, the decision not up to me. I'm working for a Fortune 100 company and it's their decision, not mine. Not all of us have total authority over what we create, keep that in mind before you make judgments about what I'm doing. - Scott
I'm not judging you, I'm telling you the problem with what you're doing. If I were judging you I'd say "you're lazy and scared of telling them how to improve usability", rather than the actual issues with what your're doing and advising you pick an alternative. - Incognito
I'm pretty sure you've made the assumption that I'm talking about a modal window that actually interrupts the user's experience and won't let them continue reading the page until they do whatever we want them to do in the modal. Without taking up my time writing a long-winded explanation, that's incorrect. The user has to explicitly open it themselves by clicking a button (it's a Forward to a Friend modal) and can close it at any time by using a "close" button or hitting "ESC" but when they're in it, I don't want the screen reader continuing to read outside the modal. - Scott
Also, by "screen reader", I'm talking about programs that read screen content out loud for visitors to the website who are blind. - Scott

1 Answers

3
votes

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.