Table of Contents

2.2.1. Modal windows

Purpose

Modal windows appear directly on the inside of the current browser window, above the web page or the application. They are different from pop-up and pop-under windows that open new external windows, respectively in front of and behind the current window. Also known as lightbox, overlay or pop-in.

Modal windows take control of the current page, for as long as they are displayed on the screen. To continue navigating, the user must therefore take some action in the modal window.

Basic HTML code

Modal content can be included in a page using either of the two methods below (with the same result):

  1. Either the content is present by default in the DOM, but hidden, before being displayed in the modal window by a user action. In this case, make sure the reading order is logical when CSS is deactivated (see recommendation 1.2.1 Write the HTML source code by following the logical reading order in the Accessibility guidelines for HTML and CSS).
  2. Or the content is absent by default from the DOM, before being dynamically loaded in the modal window by a user action. In this case, make sure that the content is deleted from the DOM when the modal window is closed.

According to the choice of integration method, the behaviour will be different when JavaScript is not activated:

  1. In the first case, the element that triggered the modal window must point to the content of the modal window, present by default in the DOM.
  2. In the second case, the element that triggers the display of the modal window must point to another page where the user can access the content of the modal window.

JavaScript behaviour

When a modal window is displayed on the screen:

  1. The focus must be set on the container of the modal window. To do this add a tabindex=“0” on the container, and set the focus there dynamically in JavaScript.
  2. The user must not be able to tab on the rest of the page, behind the modal window. To do this, add a tabindex=”-1” on all the tabulable elements on the rest of the page.
  3. The Esc key on the keyboard must allow the user to close the modal window.

When a modal window is closed:

  1. All the tabindex=”-1” added dynamically on opening the modal window must be deleted from the source code to re-enable page navigation from the keyboard.
  2. The focus must be re-set on the element that triggered the opening of the modal window.