Modal dialog windows (dialog pop-ins)

Sommaire

Principe

A modal dialog window is a specific type of modal window.

It interrupts the current process in order to prompt the user to enter information or require a response.

This code is based on “Dialog (Modal)” design pattern found in the WAI-ARIA 1.0 Authoring Practices of the W3C.

Core HTML base

The HTML code for a modal dialog window can vary slightly depending on whether it has a visible title or not.

Modal dialog window with a visible title

<div role="dialog" aria-labelledby="modal-title">
  <h1 id="modal-title">[Title of Modal Dialog Window]</h1>
  [Content in the modal dialog window]
  <button>Cancel</button>
  <button>[Default action]</button>
</div>

Modal dialog window without a visible title

<div role="dialog" aria-label="[Title of Modal Dialog Window]">
  [Content of the modal dialog window]
  <button>Cancel</button>
  <button>[Default action]</button>
</div>

ARIA roles, states and properties

Keyboard interactions

Tab

When the modal dialog window is visible this key moves the focus successively from one interactive element to another in the content of the dialog box. If the keyboard focus is on the last interactive element when the key is pressed, the keyboard focus is moves to the first interactive element in the modal dialog window.

Shift + Tab

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

Enter

When the modal dialog window is visible, this key triggers the default action of the modal dialog window.

Esc

When the modal dialog window is visible, this key closes the dialog box and returns the keyboard focus to the interactive element that opened the dialog box.

Expected behavior

When the modal dialog window is visible on the screen

When the modal dialog window is hidden (closed)

Notes

If the HTML containers of the modal dialog window are siblings with the container of the rest of the page 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 pop-up is visible:

<body>
  <div aria-hidden="true">
    [Content for the rest of the page]
  </div>
  <div role="dialog" aria-labelledby="modal-title">
    <h1 id="modal-title">[Title for the Modal dialog window]</h1>
    [Content for the modal dialog window]
    <button>Cancel</button>
    <button>[Default action]</button>
  </div>
</body>

Remove the aria-hidden="true" attribute from the container of the rest of the page when the modal dialog 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.

Comments

Add a comment

Required fields are marked *.

Back to top