« Back to home

A minimal viable modal - option 1

This is an experiment: what is the absolute minimum markup and JavaScript needed today to produce a working, accessible modal? The answer, as of this page, is zero JavaScript.

This content should become inert while the modal is open.

A link (should not be focusable while modal is open)

Expected results:

1. Focus should go to the modal - either container, heading, first focusable element inside
2. The role should be announced e.g. dialog.
3. The current element should be announced if not the container.

Notes

What this requires to function: this page uses the command/commandfor Invoker Commands API, which reached Baseline support (Chrome 135+, Firefox 144+, Safari 26.2+) very recently. There is no JavaScript fallback here, on an older browser, the "Open modal" button will do nothing at all. That absence of a fallback is deliberate, this page is testing the true minimum, not a production-ready pattern.

Because this uses a native <dialog> shown via show-modal, role="dialog" and aria-modal="true" are applied automatically by the browser, no ARIA attributes are written in the markup below. Escape also closes the dialog automatically, no JavaScript needed. Clicking the backdrop does not close the dialog, that is correct native behaviour, not a bug, and would need extra JavaScript to add.