More accessible modals

Modal dialogs need to move focus into the dialog when they open, keep keyboard focus inside the dialog while they are open, and return focus to the trigger when they close.

These examples show two common approaches. The first uses ARIA attributes on regular HTML. The second uses the native HTML <dialog> element.

ARIA modal dialog

This version uses role="dialog", aria-modal="true", and accessible names and descriptions. JavaScript handles showing the modal, trapping focus, closing it, and restoring focus.

HTML Dialog element

This version uses the native <dialog> element and opens it with showModal(). The browser provides modal behavior, while JavaScript still restores focus and keeps keyboard handling predictable.