Dialogs

We use JQuery-ui version 1.8.11 to create the dialogs. There are two ARIA roles which pertain to dialogs:

1. dialog : This role is used when the dialog has no informational message within it, for example if an entire app window is contained within a dialog frame.
2. alertdialog : a dialog which contains controls such as OK or CANCEL; also usually contains some textual instructions or a short informational message, etc.

Here is how the ARIA Authoring Practices document describes the alertdialog role:

- You must use the alert role for a one-time notification which shows for a period of time and goes away and is intended to alert the user that something has happened. The assistive technology should be notified by the user agent that an alert has occurred, if your operating system supports this type of event notification. When choosing to use alert you should use the alertdialog role instead if something inside the alert is to receive focus. Both alert and alertdialog appear to pop-up to the user to get their attention.

Neither a role of dialog, nor a role of alertdialog causes the Jaws screen reader nor the NVDA screen reader to read informational messages contained within dialogs. However, focus does seem to be shifted to the first button in the buttons object if it exists.

To get around this issue, we need to use live region markup. However, because of the way browsers handle the CSS zindex property, jQuery refuses to create a dialog which is itself nested in another container. Look at the div whose id is "myOtherDialog" and note that it is wrapped in a div with id "liveRegionContainer". Now, load this page in your browser and use the developer toolbar or equivalent to examine the live source of the page. You'll see that after jQuery has processed the dialog markup passed to it, the dialog "myOtherDialog" has been removed from the liveRegionContainer.

I believe there are timing issues which cause the screen readers not to process live region definitions till some unspecified amount of time after the region is created or unhidden in the DOM. This means that to cause a dialog's informational message to be spoken, we must:

• use aria-live on the dialog container passed to jQuery
• Insure that the dialogopen event callback includes a ccalls the refresh function supplied here, or similar
• The refresh will wait a fixed amount of time before elements are rewritten; seems to be necessary to cause the live region to trigger

We also put live region markup on the button which opens/closes the dialog so that its text changes will be announced by the screen reader.