← All terms
Glossary

Focus trap

A focus trap is a JavaScript pattern that contains keyboard focus inside a modal dialog or other transient container, preventing Tab from leaving the dialog while it is open.

Also: modal focus trapAlso: dialog focus trapAlso: inert focus

Detailed explanation

Modal dialogs (cart drawers, newsletter popups, image lightboxes) open on top of the rest of the page, but the underlying page still has focusable elements. Without a focus trap, pressing Tab while a modal is open moves focus into the underlying page — confusing for keyboard users and breaking the screen-reader expectation that the modal is the active region.

A correctly-implemented focus trap: (1) moves focus to the modal's first focusable element on open, (2) cycles Tab/Shift+Tab through the modal's focusable elements only, (3) closes on Escape, (4) returns focus to the triggering element on close. This is the recipe in the WAI-ARIA Authoring Practices Dialog pattern.

How this applies to Shopify stores

Cart-drawer modals, newsletter popups, search overlays, and image lightboxes in Shopify themes routinely lack focus traps. AccessComply patches the theme JavaScript to add focus-trap behavior, Escape-key handling, and focus-return logic per the WAI-ARIA dialog pattern.

Primary source: w3.org