Dialog: modal accessibility

[ezufelt]

Firefox 8.0 JAWS 13 Dialog demos 1.9pre

Modal dialogs open with application mode on.

Basic Modal

1. After tabbing once to close button I can use up / down arrows to access all other form controls in the DOM, cannot tab to other interactive controls. This is different from animated dialog, and other modals, where DOM contents outside of dialog are not available.

Message, Confirmation, Form

1. Can only access dialog contents that are interactive elements, cannot access message text as it is not focusable.

2. It is possible to get out of the modal 'sandbox'. Accessing address bar (alt + d), tabbing to page, then disabling and renabling Virtual PC cursor (JAWS key + z (twice)) and then a buffer refresh (JAWS key + Escape) allowed access to entire DOM contents. This appears true for all modals. This also causes problems with other keyboard operations. When not in modal dialog segment of the DOM it is impossible to go back a page (alt+left arrow or backspace) or even to close the browser (alt+f4).

3. (Related to 2) From outside of the dialog pressing tab does not return to first focusable element in dialog.

[larowlan]

Part of the issue here is that it's possibly to tab out of modal dialogs, this is fixed in: ​https://github.com/larowlan/jquery-ui/commit/bb2c897f128e42dc8ad485719ee260d86e56befe

[Jörn Zaefferer]

I've tested the issues described here against JAWS 14 and Firefox 16, based on the accessibility updates in the dialog branch: ​https://github.com/jquery/jquery-ui/pull/794

Basic Modal is now consistent with other demos: DOM content outside the dialog isn't available, both through tabbing and cursor up/down keys.

Modal Form:

1. Can access both text inputs and other elements through cursor up/down keys, all content within the dialog is available. Only inputs are tab focusable. This is consistent with regular non-dialog markup.

2. I followed the steps described and don't see the issue described. Focus moves correctly back to the dialog as it should.

3. Can't get outside the dialog anymore. Though even if that would somehow happen again, we now have proper code in place to focus the first input, which applies when moving focus outside the page.

Some of these might have been fixed by updates in JAWS or Firefox, since I tested with newer versions then those available a year ago. Though especially the focus handling is something we improved inside the dialog itself.

[Jörn Zaefferer]

The dialog accessibility have landed in master, fixing the described issues.

Relevant commits: ​https://github.com/jquery/jquery-ui/commit/2a887e43213c4dbb21509b670cf5dc8ac2c67573 ​https://github.com/jquery/jquery-ui/commit/8ee8046c029354501bc6d1690b3ac84edf23efd7 ​https://github.com/jquery/jquery-ui/commit/83a9f219bf40ff834d660020bbfa7de550e48a0c