Start free

WCAG A · 2.1.2Checked on paid plansEU · US

Keyboard focus gets stuck

What is a keyboard trap?

Short answer

A keyboard trap catches focus and won’t let go: pressing Tab keeps you in the same place. Focus must always be able to move away (WCAG 2.1.2). Chat widgets, embedded videos and maps are the usual causes.

Why it matters

A trap is one of the few failures that stops a keyboard user completely. They can’t reach the rest of the page, can’t check out and often have to reload and give up.

How to fix it

Shopify

  1. Turn off apps one at a time (chat, reviews, pop-ups) in a theme preview to find the one that traps focus.
  2. Report it to the app’s developer with the steps to reproduce; most fix traps quickly once told.
  3. If your own code moves focus back to a field, remove that script or let Escape release it.

WooCommerce

  1. Deactivate plugins one at a time on a staging copy to find the one that traps focus.
  2. Chat and live-help plugins often have an accessibility mode; switch it on.
  3. For embedded videos and maps, use the provider’s standard embed code rather than a custom player.

In the code

  1. Remove scripts that cancel the Tab key or pull focus back to an element.
  2. If a widget needs to keep focus (a pop-up), let Escape close it and return focus.

Automated tools can only find traps on the path they walk. A trap inside a drawer that opens on click, or deep in checkout, can be missed. Embedded content in another site’s frame is also hard to see into.

The standard behind this rule

WCAGW3C, WCAG 2.2 success criterion 2.1.2 No Keyboard Trap (Level A)WCAGW3C WAI, Understanding 2.1.2 No Keyboard TrapEUDirective (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.