v135 · css

CSS Inertness

The interactivity property specifies whether an element and its flat tree descendants (including text runs) are inert or not.

concepts

  1. CSS interactivity

    The raw interactivity: inert property — toggle it on a form, watch focus, click, and tab stop hitting children.

  2. Modal freezes page

    The spec's motivating use case: open a modal, freeze everything behind it without script — :has(dialog[open]) flips a class, and interactivity: inert takes over. Compare against the legacy inert-attribute approach.

  3. Inertness tree walker

    Nested layer tree with toggleable interactivity: inert on each branch. A live walker uses checkVisibility({ checkInert: true }) to mark every descendant button as alive or inert, so you can see exactly what Tab order will skip.

  4. Focus Trap Builder

    Open a confirm dialog and compare the old JS-inert approach vs CSS interactivity: inert. Tab through the page and watch focus stay inside the modal without any JavaScript event listeners.

  5. Tour Overlay

    A 3-step product tour that spotlights one UI section at a time. CSS interactivity: inert makes all non-highlighted zones completely non-interactive — no click, no Tab, no hover — as the tour advances. JS only changes a data-tour-step attribute; CSS handles blocking and dimming from there.

why it shipped

It is expected that for paginated carousel content, only content on the active page is focusable / included in the tab order. This is typically accomplished through the use of Javascript, as can be seen in the Web Accessibility Initiative Carousel example.

references