The Incredible Accessible Modal Window, Version 1

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:

The page is divided into three sections:

<div id="mainPage></div>

<div id="modal" role="dialog"></div>

<div id="modalOverlay"></div>

When the modal dialog is displayed, an overlay is placed over top of the mainPage so it is

visually grayed out in order to indicate you cannot interact with what is behind the window

not clickable with the mouse

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

Keyboard access is limited to only interacting with the modal dialog once it is visible

The tab key loops through all of the keyboard focusable items within the modal window

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

The escape key is mapped to the function to close the modal window

The enter key is mapped to the submit function of the modal window

The beginning of the modal dialog is marked with an h1

There are offscreen instructions that describe the modal dialog and how to interact with it

The instructions are attached through the aria-labelledby attribute.

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.

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.