Modal and Dialog Keyboard Trap Problems

Why it matters

Modal dialogs are ubiquitous in modern web interfaces: cookie consent banners, shopping cart overlays, confirmation dialogs, image lightboxes, newsletter popups, and checkout flows. When modal focus management is broken, keyboard users face one of two catastrophic scenarios: (1) they cannot operate the modal at all (focus never enters), or (2) they are trapped in the modal with no way to close it (WCAG 2.1.2 violation — No Keyboard Trap). The second scenario is considered one of the most severe accessibility failures because it completely prevents the user from using the website until they reload the page. For e-commerce sites, a broken checkout confirmation modal can make purchases impossible for keyboard users.

Symptoms — what you'll see

If your site has this problem, you may observe any of the following:

• Pressing Escape does not close the modal/dialog
• Tab key escapes the modal and reaches content behind the overlay
• Focus does not move into the modal when it opens
• Focus does not return to the trigger element when modal closes
• Screen readers can read content behind an open modal
• Cookie consent banners that keyboard users cannot dismiss or interact with
• Search overlays, video lightboxes, or confirmation dialogs with broken focus management

Common causes

• Modal components built without implementing focus management at all
• Using CSS visibility/opacity to show/hide modals without managing the DOM focus
• Third-party modal/lightbox libraries without accessibility features
• Copy-pasted modal code from tutorials that focused on visual implementation only
• React/Vue modal components that render content but do not manage focus lifecycle
• Cookie consent management platforms (CMPs) that inject inaccessible banners
• Custom video players with fullscreen modals that lack keyboard support

How to fix it

1. 1When modal opens: use JavaScript to move focus to the first interactive element inside the modal, or to the modal's heading/container.
2. 2Implement a focus trap: intercept Tab and Shift+Tab keydown events to cycle focus only within the modal while it is open.
3. 3Add Escape key handler: pressing Escape should close the modal and return focus to the triggering element.
4. 4Add role="dialog" (or role="alertdialog" for critical prompts) and aria-modal="true" to the modal container.
5. 5Add aria-labelledby pointing to the modal's title element, and aria-describedby pointing to modal body text if applicable.
6. 6When modal closes: return focus to the exact element that triggered the modal opening.
7. 7Set aria-hidden="true" on the page content behind the modal when it is open to prevent screen readers from reading it.
8. 8Test the complete open-interact-close cycle using keyboard only.

// BROKEN: modal opens but focus management missing
function openModal() {
  document.getElementById('modal').style.display = 'block';
  // Focus goes nowhere — keyboard users stranded
}

function closeModal() {
  document.getElementById('modal').style.display = 'none';
  // Focus lost — keyboard users don't know modal closed
}

// FIXED: complete focus management
let triggerElement;

function openModal(trigger) {
  triggerElement = trigger; // remember who opened it
  const modal = document.getElementById('modal');
  modal.removeAttribute('hidden');
  modal.setAttribute('aria-modal', 'true');

  // Move focus to first focusable element in modal
  const focusable = modal.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  if (focusable.length) focusable[0].focus();

  // Trap focus within modal
  modal.addEventListener('keydown', trapFocus);

  // Hide background from screen readers
  document.getElementById('page-content').setAttribute('aria-hidden', 'true');
}

function closeModal() {
  const modal = document.getElementById('modal');
  modal.setAttribute('hidden', '');
  modal.removeEventListener('keydown', trapFocus);
  document.getElementById('page-content').removeAttribute('aria-hidden');
  triggerElement?.focus(); // return focus to trigger
}

function trapFocus(e) {
  const modal = document.getElementById('modal');
  const focusable = [...modal.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  )];
  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  if (e.key === 'Escape') { closeModal(); return; }
  if (e.key === 'Tab') {
    if (e.shiftKey && document.activeElement === first) {
      e.preventDefault(); last.focus();
    } else if (!e.shiftKey && document.activeElement === last) {
      e.preventDefault(); first.focus();
    }
  }
}

How to test your fix

After applying the fix, verify it works using these testing steps:

1. Identify every modal, dialog, drawer, lightbox, and overlay on your site.
2. For each, trigger it via keyboard (Tab to the trigger, press Enter/Space).
3. Verify focus moves into the modal after it opens.
4. Tab through all interactive elements — confirm Tab does not escape to background content.
5. Press Escape and confirm the modal closes and focus returns to the trigger.
6. Shift+Tab from the first modal element — confirm focus cycles to the last modal element.
7. Use VoiceOver to confirm content behind the modal is not announced while modal is open.

Frequently asked questions