Start free

WCAG A · 2.4.3Checked on paid plansEU · US

Pop-ups don’t manage keyboard focus

Where should focus go when a pop-up opens?

Short answer

Into the pop-up. When a pop-up, cart drawer or size guide opens, focus moves inside it. When it closes, focus goes back to the button that opened it (WCAG 2.4.3).

Why it matters

If focus stays on the page behind, keyboard users Tab through content they can’t see while the pop-up blocks the screen. Screen reader users may never learn the pop-up opened at all.

How to fix it

Shopify

  1. Cart drawers in current Shopify themes manage focus; check any custom drawer or app that replaced it.
  2. Email pop-up apps (Klaviyo, Privy and similar) are fixed in the app; check its accessibility settings or ask support.
  3. In custom code, use the native <dialog> element with showModal(), which moves and returns focus for you.

WooCommerce

  1. Side cart and quick-view plugins are the usual source; check their settings or ask the developer.
  2. Pop-up builders often have an accessibility or “focus” option; switch it on.
  3. For custom pop-ups, the native <dialog> element with showModal() is the simplest fix.

In the code

  1. Move focus into the pop-up when it opens (to its heading or first control).
  2. Close it with Escape and send focus back to the button that opened it.

Automated tools only open pop-ups that announce themselves in the code. Pop-ups that appear on a timer, on exit intent or after scrolling are not triggered. Check those by hand.

The standard behind this rule

WCAGW3C, WCAG 2.2 success criterion 2.4.3 Focus Order (Level A)WCAGW3C WAI, Understanding 2.4.3 Focus OrderEUDirective (EU) 2019/882, the European Accessibility ActEUETSI, EN 301 549 V3.2.1 (2021-03), clause 9 covers web contentEUDeque, EN 301 549 v4.1.1 is final (WCAG 2.2 AA)

A plain summary, not legal advice.