Keyboard focus testing

Focus Trap Tester

Check that keyboard focus stays inside your modal or menu. Paste the component, tab through it in a sandbox and get a live log and verdict for escapes, wrap-around and Escape handling.

Sandbox - click inside, open your modal, then press Tab about 10 times, Shift+Tab a few times and finally Esc.
CheckResultDetails
Focus log
    Focusable elements in container

      Runs entirely in your browser. Nothing is uploaded to any server.

      Why test focus traps

      Modals must contain focus

      When a modal dialog is open, Tab should cycle within it instead of wandering to the hidden page behind.

      But never a dead end

      Users must always be able to leave with Escape or a close button, or it becomes a WCAG 2.1.2 keyboard trap.

      Hard to see by eye

      Focus can silently escape behind an overlay; a live log shows exactly where it goes.

      How to use the focus trap tester

      1. Paste your componentInclude the markup, styles and the JavaScript that opens the modal and manages focus.
      2. Set the selectorEnter a CSS selector for the dialog or menu container, then load it into the sandbox.
      3. Tab through itOpen the component, press Tab and Shift+Tab repeatedly and then Escape, while the verdict updates.

      How the tester works

      Your code runs inside a sandboxed frame with scripts allowed but no access to this page, cookies or storage. A small listener is added to it that reports every focus change and every Tab, Shift+Tab and Escape key press back to the tester, along with whether the focused element is inside your container and whether the container is visible.

      From that stream the tester decides whether focus ever left the container while it was open, whether pressing Tab on the last element wrapped to the first (and Shift+Tab the other way), whether Escape hid the container, and where focus went after it closed. Focus leaving the frame altogether, for example to the browser address bar, also counts as an escape.

      Trap while open

      Tab and Shift+Tab cycle only through the dialog's controls.

      Escape to close

      Escape closes the dialog without needing a mouse.

      Return focus

      Closing returns focus to the button that opened the dialog.

      Focus trap tester FAQ

      Is it safe to run my code here?

      Yes. The sandbox runs your scripts in an isolated, opaque origin that cannot read this page, your cookies or local storage.

      Why does it say "Keep tabbing"?

      The tester needs to see at least one full cycle through the container's focusable elements before it can confirm the trap.

      Does the native <dialog> element trap focus?

      A dialog opened with showModal() makes the rest of the page inert, so Tab stays inside the dialog and the browser chrome. Some browsers let focus move to the address bar, which this tester reports as leaving the sandbox.

      What is a keyboard trap under WCAG?

      WCAG 2.1.2 No Keyboard Trap fails when users cannot move focus away with the keyboard. A modal focus trap is fine as long as Escape or a close button lets users leave.

      Why are some elements missing from the focusable list?

      Elements that are hidden, disabled or have tabindex="-1" are excluded because they are not reachable with Tab.

      Try other accessibility tools

      More free tools from My Panda Toolbox.

      RINGCSS Focus Ring GeneratorDesign visible focus styles. ROLEARIA Role ReferenceEvery ARIA role with examples. SKIPSkip Link GeneratorAccessible skip-to-content links. ARIAARIA Label CheckerCheck elements for accessible names.