Focus Traps

Why It Matters

• Users get stuck and cannot navigate. An accidental focus trap means a keyboard user literally cannot leave a section of your page. They are trapped with no way forward, no way back — their only option is to close the browser tab.
• Intentional traps are sometimes necessary. When a modal dialog is open, focus should be trapped inside it so users do not accidentally interact with content behind the dialog. This is expected and correct behavior.
• The difference is about control. A good focus trap keeps focus where it belongs (inside an open dialog) and releases it when the user dismisses the dialog. A bad focus trap holds focus hostage with no escape mechanism.
• They disproportionately affect disabled users. Screen reader and keyboard-only users cannot click outside a trapped area to escape. Mouse users can simply click elsewhere — keyboard users are completely stuck.

How to Handle Focus Traps

1. Always provide a way to dismiss trapped focus. Modals and dialogs that trap focus should include a visible close button and respond to the Escape key. Pressing Escape should close the dialog and return focus to the element that opened it.
2. Trap focus only in modal contexts. Focus trapping is appropriate for modal dialogs, lightboxes, and similar overlays that require user attention before proceeding. It is never appropriate for inline page sections, sidebars, or navigation menus.
3. Cycle focus within the trapped area. When focus reaches the last focusable element in a modal, the next Tab press should wrap to the first focusable element — not escape the modal or do nothing.
4. Return focus when the trap is released. When a modal closes, focus should return to the element that triggered it — usually the button that opened the dialog. This maintains the user's place in the page.
5. Test by tabbing through your modals. Open every modal and dialog on your site and try navigating them using only Tab, Shift+Tab, and Escape. Make sure focus stays inside while the modal is open and returns to the correct spot when it closes.

Common Mistakes

• Trapping focus without an escape mechanism. A modal that traps focus but does not respond to the Escape key and has no close button is an inescapable cage for keyboard users. Always provide at least two ways out.
• Accidental traps in complex widgets. Custom date pickers, autocomplete dropdowns, and rich text editors can accidentally trap focus if keyboard navigation within them is not properly managed.
• Not returning focus after dismissal. Closing a modal without returning focus leaves the user at the top of the page or at an unpredictable location. They lose their place and have to tab through everything again.
• Trapping focus in non-modal elements. Sticky headers, sidebars, or embedded widgets that trap focus without reason frustrate users who are just trying to tab through the page normally.