Start scanning free

( Operable / WCAG 2.4.3 )

Modal opens without moving focus into it

This check maps to Focus Order. Use the guidance below to confirm the issue, understand who it affects and ship a fix.

Serious Level A WCAG 2.4.3 — Focus Order

What’s wrong

A modal dialog appears on screen, but keyboard focus stays wherever it was on the page behind it instead of moving into the dialog.

Why it matters

A keyboard or screen reader user has no idea the dialog opened. They keep tabbing through the background page, possibly interacting with content that’s now supposed to be inert.

How to fix it

When the dialog opens, move focus to it, typically the heading or the first focusable control, and return focus to the trigger element when it closes.

Before 
function openDialog() {
  dialog.hidden = false;
}
After 
function openDialog() {
  dialog.hidden = false;
  dialog.querySelector('h2').setAttribute('tabindex', '-1');
  dialog.querySelector('h2').focus();
}

Learn more