focus-kept-within-the-modal

When a modal dialog is open, keyboard focus should stay inside it. Pressing Tab or Shift+Tab should keep focus on the dialog's controls and never land on the page content behind the dialog. If focus escapes to the background while the dialog is open, keyboard and screen reader users can end up interacting with content that is meant to be inactive, which makes the dialog unreliable and confusing to operate.

Pass Patterns

The background is made inert

While the dialog is open, the rest of the page is marked inert, so none of it can receive focus. Tab moves only among the dialog's controls, because there is nothing focusable behind the dialog.

<!-- The rest of the page, made inert while the dialog is open -->
<main inert>
    <a href="/">Home</a>
    <button>Menu</button>
</main>


<div role="dialog" aria-modal="true" aria-labelledby="title">
    <h2 id="title">Edit profile</h2>
    <button>Close</button>
    <input type="text" placeholder="Name" />
    <button>Submit</button>
</div>

A focus trap keeps Tab inside the dialog

When the background is not made inert, a script keeps focus in by moving it from the last focusable element back to the first, and from the first back to the last on Shift+Tab, so Tab does not reach the page content behind the dialog.

const focusable = modal.querySelectorAll(
    'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
const first = focusable[0];
const last = focusable[focusable.length - 1];
// On Tab at the last element, move focus to first.
// On Shift+Tab at the first element, move focus to last.

Fail Patterns

Focus escapes to the background

The background is still active and there is no focus management, so pressing Tab from the last control moves focus to a control behind the dialog.

<!-- The rest of the page is still focusable -->
<main>
    <a href="/">Home</a>
    <button>Menu</button>
</main>


<div role="dialog" aria-modal="true">
    <button>Close</button>
</div>

Try It Yourself

Using a keyboard

1. Open the modal dialog.
2. Press the Tab key repeatedly, then Shift+Tab.
3. Observe where focus goes.

Expected results: Focus stays on the dialog's controls and does not move to the page content behind it. (Reaching the browser's own toolbar or address bar is acceptable.)

Actual results: Focus moves out of the dialog and onto the page content behind it.

Using a screen reader

1. Load the page and open a screen reader.
2. Open the modal dialog.
3. Navigate using Tab.

Expected results: Tab keeps focus on the dialog's controls.

Actual results: Navigation moves onto the page content behind the dialog.

FAQ

Standards and Regulations

Personas impacted by this issue

• Keyboard
• Screen Reader
• Braille
• Switch Access
• Low Vision

Learn More

• WAI-ARIA Authoring Practices: Dialog (Modal) Pattern
• WAI-ARIA Authoring Practices: Developing a Keyboard Interface

Related Issues

• focus-on-modal-open
• focus-on-modal-closed
• dialog-has-no-aria-modal