• Success Criterion 2.1.2
  • Conformance level A

Modal Focus Trap With No Escape Key or Close Button

2.1.2 — No Keyboard Trap

Scenario

Setting

A car-rental site's checkout flow

What’s wrong

Modal focus "trap" with no Esc/close reachable by keyboard (intended trap, missing exit).

Example 

function openInsuranceModal() {
  modal.classList.add('open');
  trapFocusWithin(modal); // cycles Tab between the two upsell buttons only
}
// no keydown listener for Escape, and no close/X button in the markup

Why it matters

A renter who doesn't want the extra insurance gets stuck cycling between "Add insurance" and "Add more insurance," unable to close the modal.

How to test

Tab into the component that's intentionally modal: confirm there IS a working Esc or visible close control — if neither exists, it's an unescapable trap.

How to fix

A focus trap is only acceptable when it ships with both a visible close control and an Escape key handler.

<button class="close-btn" onclick="closeInsuranceModal()" aria-label="No thanks, close">×</button>
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && modal.classList.contains('open')) closeInsuranceModal();
});

Outcome

A renter presses Escape, declines the upsell, and moves on to payment.

Who is affected

Keyboard-only users cannot exit an intentionally focus-trapped dialog that was built without an exit.

Learn more

Related scenarios