WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Keyboard trap for non-modal dialogs and popups:

for

From: Lovely, Brian (CONT)
Date: Sep 22, 2016 6:55AM

JP, I support the trapping in a modal to an extent, as it seems to provide an experience analogous to that of a sighted user. For a sighted user, using the mouse, a modal opens over a semi-opaque overlay that blocks all interaction with the rest of the page until the user dismisses the modal via either the close button or possibly also the escape key. For a non-sighted user, the technique to emulate this is to put all page content in a container, and the modal outside that container. When the modal is opened, that content container is set to aria-hidden="true" to emulate the semi-opaque overlay, and tab and/or arrow keys cycle through the modal contents, hence the "trapping" of focus within the modal. I would think this would be better than being able to move off the end of the modal and possibly having trouble getting back to it, or being unable to quite decide where the modal contents end and page content begins.

The flow would be as follows:

A button or link is encountered that will trigger the modal. It's text and surrounding context communicate that it is for completing some specific task.

The modal opens, and focus is shifted to the modal wrapper. A reference to the triggering element is stored so it can be returned to when the modal is dismissed.

Focus is trapped in the modal.

The user performs the task at hand, or decides not to do so at this time.

The user presses tab or an arrow key to cycle back to the close button and dismisses the modal.

The aria-hidden attribute on the page content is set to "false" and focus is returned to the link or button that originally triggered the modal






-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of JP Jamous
Sent: Thursday, September 22, 2016 8:10 AM
To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Keyboard trap for non-modal dialogs and popups:

Hmm, trapping me inside a modal. I don't think I like the approach Ramakrishnan. The only way I would approve it is if I have a way of getting out.

Think of this.

You trap me inside the modal and I device to press Insert + 7 to pull the list of links on the page, because I decided to go somewhere else. What if JAWS cannot get out of this modal?

Can't you use proper semantic and put the cursor at the top of the modal and let the browser handle the tabindex and navigation?

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Ramakrishnan Subramanian
Sent: Thursday, September 22, 2016 5:30 AM
To: <EMAIL REMOVED>
Subject: [WebAIM] Keyboard trap for non-modal dialogs and popups:

Dear members
I request for your inputs on the following thing.

Is it a good practice to trap the keyboard focus inside the popup or a non-modal dialog?
I mean, while using arrow keys and tab/shift tab keys, trapping the focus inside the popup.
Generally the mouse user is able to access the parent page and also the popup simultaneously.
Should this be the case for the keyboard only users and screen reader users?
Which approach would be recommendable here?
What are the pros and cons for both the approaches?

Thanks for your inputs
Ramakrishnan
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.