モーダル内にフォーカスを閉じ込める

While a modal is open, keyboard focus should stay inside it. If Tab escapes to the page behind, blind users get lost in content they cannot see.

A real dialog opened with showModal() traps focus for you automatically, which is one big reason to prefer it over a div.

If you roll a custom modal with a div, you must trap focus yourself, because nothing stops Tab from leaking out to the page.

First, send focus into the modal when it opens, usually to the first control or the heading, so the user starts in the right place.

Collect the modal's focusable items: links, buttons, inputs, and anything with tabindex. You need the first and last to build the loop.

When Tab is pressed on the last element, send focus back to the first. This wraps the user around instead of letting them out.

Handle Shift+Tab on the first element too: send focus to the last one so backward tabbing also stays trapped.

At the edges you must call preventDefault(), otherwise the browser moves focus out before your code can redirect it.

Skip elements that are disabled or hidden when picking first and last, since they cannot actually receive focus.

Trapping focus pairs with making the page behind inert, so even a stray click or screen reader cannot reach it while the modal is open.

Tab through the whole modal and watch the focus ring cycle without ever leaving. That round trip is your proof the trap works. ✅

You built a custom div modal. What must you do to keep Tab inside it?

You learned to move focus in on open and loop it at both edges, so keyboard users stay inside the modal until they choose to close it. 🎯