Modal windows

Summary

Principle

A modal window appears inside the current window, and is displayed above the page that calls it.

Modal windows take control of the current page as long as they are displayed on the screen.

Core HTML base

Modal window with a title displayed on the screen

<div role="dialog" aria-modal="true" aria-labelledby="modal-heading">
  <button>Close</button>
  <h1 id="modal-heading">[Modal heading]</h1>
  [Modal content]
</div>

Modal window without a title displayed on the screen

<div role="dialog" aria-modal="true" aria-label="[Modal heading]">
   <button>Close</button>
   [Modal content]
 </div>

ARIA roles, states and properties

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 displayed, the modal window closes and the keyboard focus is placed on the interactive element that triggered the modal window.

Expected behavior

When the modal window is displayed (open)

When the modal window is hidden (closed)

Components

These Modal window 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. Certain components may need some adjustments before they can be used in your project.

Comments

Add a comment

Required fields are marked *.

Back to top