- Core HTML base.
- ARIA roles, states and properties.
- Keyboard interactions.
- Expected behavior.
- Examples of components.
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
ARIA roles, states and properties
tabindex="-1" should be placed on the modal container.
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.
When the modal window is visible, this key closes and places keyboard focus on the interactive element that triggered the modal window.
When the modal window is visible (open)
- The focus is dynamically placed on the container of the modal window.
- The keyboard focus should stay inside the modal window, and the user should not be able to tab out of the modal window anywhere else on the background page. Here are two ways of achieving this:
- Add a
tabindex="-1"attribute dynamically to each of the interactive elements on the rest of the page.
- Add a
- The modal window can be closed with the Esc key.
When the modal window is hidden (closed)
tabindex="-1"attributes in the background content that were added when the modal window opened should be removed.
tabindexattributes that were already present in the source code before opening the modal window must return to their default values if they have been modified/deleted by the script.
- When the modal window is closed, the keyboard focus should return to the element that triggered it.
- If the modal window remains in the source code, then
visibility: hidden;should be added to the container.
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:
aria-hidden="true" attribute from the container of the rest of the page when the modal window is closed:
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.
- 04 March 2019
- Missing translation added.
- “Pop-in” term replaced by “Modal window”.