Modal windows

Summary

Principle

A modal window appears inside the current window, and is displayed above the page that calls it. Modal windows are modal dialog windows, which means that they take control of the current page as long as they are displayed on the screen.

Core HTML base

<div tabindex="-1">
  [modal content]
</div>

ARIA roles, states and properties

tabindex="-1" should be placed on the modal container.

Keyboard interactions

Tab

When the modal window is displayed, this key moves the keyboard focus successively through the interactive elements in the modal window. If the focus is on the last interactive element in the modal window when the tab is pressed the keyboard focus moves to the first interactive element in the modal window.

Shift + Tab

This key combination has the same behavior as the Tab key, but in the reverse order. If the keyboard focus is on the first interactive element in the modal window when the key combination is pressed, the focus moves to the last interactive element in the modal window.

Esc

When the modal window is visible, this key closes and places keyboard focus on the interactive element that triggered the modal window.

Expected behavior

When the modal window is visible (open)

When the modal window is hidden (closed)

Notes

If the HTML containers for the modal window and the rest of the page are siblings in the source code, i.e. at the same hierarchical level in the DOM tree, add aria-hidden="true" to the container of the rest of the page when the modal window is displayed:

<body>
  <div aria-hidden="true">
    [Content for the rest of the page]
  </div>
  <div tabindex="-1">
    [Modal content]
  </div>
</body>

Remove the aria-hidden="true" attribute from the container of the rest of the page when the modal window is closed:

<body>
  <div>
    [Content for the rest of the page]
  </div>
</body>

Examples of components

The following components are proposed here because their level of accessibility is considered good or very good.

However, before using them in your project, it is important to check that the specifications presented above have been respected. Depending on the version used, the components may need some adjustments before they can be used in your project.

  1. jQuery simple and accessible modal window, using ARIA.
  2. Lightboxing.

Comments

Add a comment

Required fields are marked *.

Updates

04 March 2019
Missing translation added.
“Pop-in” term replaced by “Modal window”.

Back to top