A modal dialog is a window that appears on top of, or within, a Web page or application. It usually requires user interaction before it can be dismissed. A modal dialog often takes the form of an opaque or semi-transparent box that overlays the parent document, and is often used to provide alerts to users, or to present (for example) forms or supplemental information related to the parent. The accessibility of modal windows can be problematic for a number of reasons, among them:
This page presents some useful solutions to all of these problems.
The ARIA dialog and alertdialog roles, which are used to indicate to a screen reader that a window has appeared on the screen, unfortunately also turn off all virtual navigation features in some screen readers, making it difficult or impossible for some users to read the text in a dialog box. However, these roles, when combined with the aria-labelledby and aria-describedby properties, can be very useful when applied to modal windows because they can force a screen reader to read the contents of a window when it opens. This alerts the user to the window's presence. The downside is that when virtual navigation is turned off, some screen readers will only read tab-focusable elements (e.g., a link or a form control) but not other, non-focusable text or elements in the box. NVDA and VoiceOver are two screen readers that do turn off virtual navigation in this mode; JAWS is one screen reader that does not turn off virtual navigation.
For an excellent discussion of the problem and some useful solutions, read "The Incredible Accessible Modal Dialog". There, the author's examples keep the browser's keyboard focus within the modal dialog and, through the use of aria-hidden, also keep the screen reader's virtual focus within the container. In the example below, however, we have taken a slightly different approach. Here, we retain the alertdialog on the overlay, which announces the element in focus within the overlay when it opens; and wrap all of the contents within a div marked with role="document", which turns on the virtual navigation that was originally removed by the alertdialog role. Keyboard focus is constrained within the dialog, and when the overlay is closed by the user the keyboard focus is returned to the button on the Web page that launched the overlay in the first place.
Click on the button below to launch an accessible modal window. When the dialog is open, use the Tab key to move the visual focus from one element to the next, and note that the keyboard focus never leaves the window. If you are using a screen reader, you should be able to read all text within the dialog as well as enter text into the form field. To close the overlay, press the Cancel button or just use the Escape key on your keyboard.