Focus Management

When modals open, move focus inside them. When they close, return focus to the trigger. Trap focus within open modals to prevent screen readers from escaping.

Example

function openModal(triggerEl) {
  const modal = document.getElementById("modal");
  modal.removeAttribute("hidden");
  // Move focus to first focusable element
  modal.querySelector("button, [href], input").focus();

  // Store trigger for later
  modal.dataset.trigger = triggerEl.id;
}

function closeModal() {
  const modal = document.getElementById("modal");
  modal.setAttribute("hidden", "");
  // Return focus to the trigger
  document.getElementById(modal.dataset.trigger).focus();
}

JAVASCRIPT

Full Editor

Pro Tip

Losing focus context (no return focus on close) is one of the most common modal accessibility bugs.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned