• Success Criterion 2.4.3
  • Conformance level A

Modal That Closes Without Returning Focus to Its Trigger

2.4.3 — Focus Order

Scenario

Setting

An online clothing store's product listing page

What’s wrong

Closing a modal without returning focus to the trigger (focus dumped to body/top).

Example 

function closeQuickView() {
  document.getElementById('quickview-modal').hidden = true;
  document.body.focus();
}

Why it matters

After closing quick view, focus lands on the body, so the shopper's next Tab press starts from the top of the page instead of the product grid.

How to test

Close a modal (Esc or the close button) and check where focus lands: if it goes to body/top instead of back to the element that opened the modal, it fails.

How to fix

Always capture the element that opened a dialog so focus has somewhere reliable to return to.

let lastTrigger;
function openQuickView(btn) {
  lastTrigger = btn;
  document.getElementById('quickview-modal').hidden = false;
}
function closeQuickView() {
  document.getElementById('quickview-modal').hidden = true;
  lastTrigger.focus();
}

Outcome

A shopper closes the quick-view panel and finds focus right back on the product tile they opened.

Who is affected

Keyboard shoppers lose their place in a long product grid every time they close a quick-view panel.

Learn more

Related scenarios