How To Prevent Screen Reader Focus (not Referring To Keyboard Focus) From Leaving Predefined Area (e.g., Modal)

I've been trying to figure out how to contain the screen reader focus within a certain area. When I say screen reader focus, I don't mean the default browser focus that one can mo

Solution 1:

You can't prevent key shortcuts of the screen reader from being used. They have priority over everything else. They aren't even caught by a keydown/up/press handler within your script. Fortunately for us as screen reader users, this isn't an acceptable way to go.

As you also have observed, the browse cursor is effectively completely independant from the system focus. The accessibility tree determines what is reachable when using the screen reader's browse cursor.

To temporarily restrict the elements seen by the browse cursor, you must use the aria-modal attribute. Put it on the root element that should be reachable. Everything inside will stay reachable. Everything else outside will no longer be reachable as long as the attribute stays on the element.

Don't play with aria-hidden to produce the same effect. Some screen readers have issues with nested elements having an aria-hidden attribute. For example, if an outer element has aria-hidden=true and an inner element has aria-hidden=false, Jaws won't show the inner element.

Restricting the browse cursor with aria-modal, as well as hidding elements with aria-hidden by the way, doesn't automatically imply that they can't be focused with the regular system focus (Tab/Shift+Tab). You will therefore usually double the aria-modal restriction with a focus trap to prevent the system focus from going to a place where it isn't expected. If you don't do it, you may create troubles for screen reader users (what should the screen reader do if the focus is currently on an element hidden from the accessibility tree ?). This is a recurrent oversight.

The safest to make a focus trap is to catch tab on the last allowed element and shift+tab on the first, and resp. bring the focus back to the first or last allowed element. It's much easier than setting all focusable elements to tabindex=-1 and then back to tabindex=0, and as far as I have tested, it works almost everywhere.