v135 · css / accessibility

Focus Trap Builder

Explore how the CSS interactivity: inert property creates an accessibility-correct focus trap. Open the modal, watch the background regions become inert, then Tab through the page and see focus stay inside the dialog — no JavaScript event listeners required.

checking CSS interactivity property…
The interactivity CSS property (Chrome 135) applies the HTML inert attribute semantics via CSS. Elements with interactivity: inert — and their subtrees — are removed from focus order, hidden from assistive technology, and do not receive pointer events. No JavaScript event listener needed to block background focus.

Focus trap mode

Interactive stage — press Tab to navigate

Page layout

header
Home About Contact
main content
footer
Privacy Terms

Focus event log

Press Tab inside the stage above to see focus events…

Applied CSS