ARIA Dialog

From Level Access Web Labs
Jump to: navigation, search

ARIA Dialog Example

ARIA Dialog Example

This page demonstrates how to make a modal window as accessible as possible to assistive technology users. Modal windows are especially problematic for screen reader users. Often times the user is able to "escape" the window and interact with other parts of the page when they should not be able to. This is partially due to the way screen reader software interacts with the Web browser.

Reference: WAI Description, properties, keyboard interaction. http://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal

The Accessible Modal Window in Action

To see this in action, you just need to . If the modal window works as planned, once the modal window is visible you should not be able to interact with other links on the main page like going to Google's site. If you can interact with the page behind the modal window, guidance is given for how to get back to the modal window.

Notes

Regarding web app behavior on Windows, specific to the use of role=dialog, it causes screen readers like JAWS and NVDA to activate Applications Mode when focus is set within. When JAWS exits AM, all of the background page content remains in the Virtual Buffer and can be interacted with as before, however when NVDA re-activates Browse Mode, it now confines Virtual Buffer navigation within the boundaries of the dialog region as you use the arrow keys to navigate.

On iOS, the dialog region is shown as content using VoiceOver, however the background content remains visible nevertheless.

Within desktop apps only focus is set to the active element that can receive focus, and there is no Virtual Buffer in the same manner as the web. Instead JAWS Mode is used in JAWS to navigate via the mouse pointer if you wish granular access to static content within OS dialog panes. This can be seen on standard JavaScript Alert prompts on the web. (alert('Test content goes here');) When an OS modal is opened, the background content cannot be interacted with.

None of these behavioral differences on the web are specifically documented in the spec, but are the interpretation of the UAIG and Roles Model documentation for the platform the AT is running within, so the interaction models are specific to the AT as interpreted within the spec.

Currently the only way to hide background content for web modal layers across IE,FF, Chrome, and Safari is to use aria-hidden, which works in the latest versions of JAWS, NVDA, and VoiceOver.

Test results for ARIA Dialog

AT Browser Notes
JAWS Internet Explorer Works as expected When the View Modal Window button is activated the Dialog title is announced followed by the Role of dialog and then the Dialog description. The main content of the page is not announced. It is possible to read the text that is not explicitly attached to a focusable element with the virtual cursor. Note: if ESC is used to exit forms mode the Dialog is closed.
JAWS Firefox Works as expected When the View Modal Window button is activated the Dialog title is announced followed by the Role of dialog and then the Dialog description. The main content of the page is not announced. It is possible to read the text that is not explicitly attached to a focusable element with the virtual cursor. Note: if ESC is used to exit forms mode the Dialog is closed.
NVDA Internet Explorer Works as expected When the View Modal Window button is activated the Dialog title is announced followed by the Role of dialog and then the Dialog description. The main content of the page is not announced. It is possible to read the text that is not explicitly attached to a focusable element in browse mode. Note: If NVDA+CTRL+Space is used to navigate to the parent document then the role of dialog is announced and the user must press enter at this point to read the dialog content.
NVDA firefox Works as expected When the View Modal Window button is activated the Dialog title is announced followed by the Role of dialog and then the Dialog description. The main content of the page is not announced. It is possible to read the text that is not explicitly attached to a focusable element in Browse mode. Note: If NVDA+CTRL+Space is used to navigate to the parent document then the role of dialog is announced and the user must press enter at this point to read the dialog content
VoiceOver Safari Does Not Work as expected, The Dialog title and the Role of dialog is not announced when the dialog gains focus. The dialog description text is not announced by VoiceOver. It is not possible to close the dialog when swiping to the cancel button the focus is shifted away from the button before it can be activated.
Talkback Firefox does not Work as expected. When the dialog gains focus the label and description of the dialog are not announced. The role of dialog is not announced. It is possible to read the text that is not explicitly associated with a control. It is possible to read content such as the notes section of the page.
Talkback Chrome does not Work as expected. When the dialog gains focus the label and description of the dialog are not announced. The role of dialog is not announced. It is possible to read the text that is not explicitly associated with a control. It is possible to read content such as the notes section of the page.