Creating Modal Windows and Interstitials

View the library of solutions.

A modal window is a web dialog box which appears upon a user action which launches it. An interstitial is a modal-like window which appears on page load.

Managing Focus

Modal Windows

Focus should go to the first actionable element when the modal is opened. This should be the close modal button.

Interstitials

Focus should go to the dialog box itself. This will cause the screen reader to read the entire intersitial content.

Upon closing the dialog box

If the box is a modal, focus should go to the triggering mechanism if it still exists. Otherwise it should go to the <body>.

If the box is an interstitial, focus should go to the <body>.

The use of role="dialog" and role="document"

The dialog window should have a role="dialog".

When using role="dialog" it is imperative that you place all dialog content within a nested container having a role="document". Otherwise, in some browsers content that doesn't gain focus will not be read.

Escaping the Dialog Box

You are mimicking an operating system dialog wherein there is no way to leave the dialog without either:

A web dialog box should mimic this behavior. As long as the user has a way out either by using the close button or by hitting “ESC” the modal is fine. It is acceptable that the user is unable to reach the browser chrome while the modal window is active.

The Close Button

Make sure the close button has descriptive screen-reader-text which says something like "close dialog box" (just "close" or "close window" is too confusing).