Q15 of 24 · Accessibility

How do you test focus trapping in modal dialogs and off-canvas menus?

AccessibilityMidaccessibilityfocus-managementmodaldialogariakeyboardtesting

Short answer

Short answer: Open the modal, Tab repeatedly and verify focus cycles within it (not to background content). Press Escape and verify the dialog closes and focus returns to the trigger element. Also verify that screen reader browse mode cannot access content behind the modal while it's open.

Detail

The ARIA dialog pattern requires three focus management behaviours when a modal opens:

  1. Focus moves into the modal: on open, focus must move to the first focusable element in the modal (or to the modal container if no focusable element exists and the container has tabindex="-1").
  2. Focus is trapped inside: Tab must cycle through all focusable elements within the modal and wrap back to the first. It must never reach the document behind the modal.
  3. Focus returns on close: Escape (and any explicit close button) must close the modal and return focus to the element that triggered it — not to the top of the page.

Keyboard test procedure:

  1. Tab to the button that opens the modal. Press Enter.
  2. Verify focus is now inside the modal.
  3. Tab through all focusable elements — they should cycle without leaving the modal.
  4. Shift+Tab backward — same cycling, in reverse.
  5. Press Escape — modal closes, focus is on the original trigger button.

Screen reader browse mode: when a screen reader is in browse/reading mode (using arrow keys), it can reach any content in the DOM regardless of Tab focus. The modal's backdrop content must have aria-hidden="true" applied while the modal is open, so screen reader browse mode cannot access it. Verify this by arrow-keying in VoiceOver or NVDA while the modal is open — you should not be able to reach the page content behind it.

// WHAT INTERVIEWERS LOOK FOR

Covers the three requirements (focus in, trapped, returned). Specifically calls out the aria-hidden on backdrop as the screen reader protection — not just the Tab focus trap.

// COMMON PITFALL

Only testing Tab focus trapping and missing that screen reader browse mode can bypass Tab focus entirely. The aria-hidden on the backdrop is what prevents screen reader users from escaping.