v132 · css

CSS Inertness

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

concepts

  1. interactivity

    Cascade-driven inert state.

  2. carousel pages

    The motivating use case: only the active slide is in the tab order.

  3. tab walker

    Toggle interactivity: inert on a middle group, tab through the page, watch the focus log record which controls were reached.

  4. interactivity vs inert attribute

    Side-by-side matrix: nine questions, two answers each. Why the CSS version exists when the HTML attribute is already a thing.

  5. Conditional form sections

    A checkout form where interactivity: inert combined with :has() makes entire sections non-interactive — no JS disabled management needed. Tab through to see inert sections skipped entirely.

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