IT lexicon › Web › Focus trap

Focus trap

Web På svenska → Updated: 2026-07-30

The technique of keeping keyboard focus confined inside an active element (usually a modal/dialog) so that Tab navigation cycles within it and doesn't "leak out" to the background. A fundamental accessibility requirement for modals — without it, screen-reader and keyboard users get lost.

Problem: when a modal opens but focus can tab out to the (hidden) background behind the overlay, keyboard and screen-reader users lose their orientation — they end up in content they can't see. A focus trap ensures that: focus is moved into the modal when it opens, Tab/Shift+Tab cycle between the focusable elements INSIDE it (never reaching the background), and focus is restored to whatever opened the modal when it closes (plus Esc to close). This is a WCAG requirement for accessible dialogs. The good news: the built-in <dialog> element with showModal() gives a focus trap for free and correctly — a big reason to use it instead of building your own modals (where incorrect focus traps are a classic a11y bug). Libraries like focus-trap exist for home-built cases. Related to dialog-element and prefers-reduced-motion.

← Back to the lexicon