The Incredible Accessible Modal Window, Version 1

Read about Version 2.

Read the blog post about creating this demonstration.

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.

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 our main accessibility page. If you can interact with the page behind the modal window, guidance is given for how to get back to the modal window.

Features

This example implements the following features:

  1. The page is divided into three sections:
    1. <div id="mainPage></div>
    2. <div id="modal" role="dialog"></div>
    3. <div id="modalOverlay"></div>
  2. When the modal dialog is displayed, an overlay is placed over top of the mainPage so it is
    1. visually grayed out in order to indicate you cannot interact with what is behind the window
    2. not clickable with the mouse
  3. When the modal dialog is displayed, the mainPage is marked with aria-hidden="true" to prevent screen readers from interacting with it once the modal dialog is open
  4. Keyboard access is limited to only interacting with the modal dialog once it is visible
    1. The tab key loops through all of the keyboard focusable items within the modal window
    2. This is determined programmatically through the DOM each time the tab key is pressed so you do not have to create an explicit list of focusable items within the modal window to keep track of
    3. The escape key is mapped to the function to close the modal window
    4. The enter key is mapped to the submit function of the modal window
  5. The beginning of the modal dialog is marked with an h1
  6. There are offscreen instructions that describe the modal dialog and how to interact with it
    1. The instructions are attached through the aria-labelledby attribute.
    2. note, the maximum length of text in an aria-labelledby attribute for JAWS is around 240 characters. Other screen readers do not have this limitation.
  7. There is a shim in place for VoiceOver in Safari support since this combination does not announce the aria-labelledby attribute of an element with role="dialog" when an item within the element receives focus. The shim makes the modal window itself programmatically focusable (tabindex="-1") and sets the focus to the modal window itself instead of the first focusable item within the modal window. This goes against the ARIA Authoring Practices for modal dialog windows.
  8. Configurations Tested
    • JAWS 14.0.6005 in IE 10.0.9200.16635 in Windows 7, Service Pack 1: Passed
    • NVDA 2013.1.1 in Firefox 23.0.1 in Windows 7, Service Pack 1: Passed
    • VoiceOver in Safari 6.0.5 (8536.30.1) in OS X 10.8.4: Passed, with shim
    • ChromeVox 1.29.1 in Chrome 29.0.1547.62 in OS X 10.8.4: Passed
    • Orca 3.4.2 in Firefox 23.0 in Ubuntu 12.04: Partial Functionality - does not support aria-hidden