How can you ensure keyboard focus management during modal dialogs?

• A. Allow focus to escape the modal to underlying page.
• B. Do nothing; rely on users to click back.
• C. Trap focus within the modal, return focus to trigger element on close, provide accessible close/esc.
• D. Only manage focus for mouse users.

Answer: (C)

Trapping and restoring keyboard focus when a modal dialog is shown is essential for accessible interaction. When a modal opens, keyboard users must be confined to the dialog, not able to tab to elements behind it. This creates a predictable, navigable experience and prevents confusion for screen reader users. The focus should initially land on a meaningful element inside the modal (often the first focusable control or the close button) so users have an immediate starting point.

You should implement a focus trap so that pressing Tab cycles through only the focusable items within the modal, and Shift+Tab cycles in the opposite direction. This loop ensures that focus never escapes to the underlying page while the modal is open. Providing an accessible way to close the dialog—such as a clearly visible close button and support for the Escape key—helps all users exit the modal easily.

Crucially, when the modal closes, you should return focus to the element that triggered it, so users can resume their prior task without losing their place. Additionally, apply proper ARIA semantics, like role="dialog" and aria-modal="true" (or equivalent handling with screen readers), to communicate the dialog's modality to assistive technologies.

Why this approach matters: it prevents focus from drifting to the content behind the modal, supports efficient keyboard navigation, and preserves the user’s workflow by restoring focus to the opener. Letting focus escape, doing nothing, or focusing only on mouse users fails to provide a reliable, inclusive experience for keyboard and assistive technology users.