CSS Interactivity examples showcase anti-patterns for use

### MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/interactivity

### What specific section or headline is this issue about?

Instances where single controls are marked as inert with css

### What information was incorrect, unhelpful, or incomplete?

The examples of marking a single button, or a form field and its label are inert are exactly the types of issues that were raised in opposition to the CSS interactivity / inert proposal - https://github.com/w3c/csswg-drafts/issues/10711

Seeing them promoted here without warning of careful use is troubling, to say the least.

I see that there is an accessibility concern section, that is copied from the attribute's page - but even on the attribute's page, the example that immediately follows the accessibility warning is an example of _what not to do_.

### What did you expect to see?

The off-screen content example is good. It's the only example on this page that wouldn't be generally be a misuse of inert.

While i understand basic examples are far easier to create / help readers understand the functionality of web features - there should be warnings accompanying these basic examples (because the accessibility section isn't going to be what someone copy and pastes from these pages) that "hey - this isn't actually a good use case for this feature. if you want to make a button or input field inoperable, use the `disabled` attribute. Using `inert` completely hides content from the accessibility tree. People with low or no vision may be completely unaware of inert content - whereas content that is properly marked as disabled won't currently be functional, but it can still be discovered by users assistive of technology."

### Do you have any supporting links, references, or citations?

Here is the content that I wrote for the HTML spec, concerning use of `inert` - emphasis added to the part of this guidance that is applicable to the examples used on these pages

>An inert subtree should not contain any content or controls which are critical to understanding or using aspects of the page which are not in the inert state. Content in an inert subtree will not be perceivable by all users, or interactive. Authors should not specify elements as inert unless the content they represent are also visually obscured in some way. **In most cases, authors should not specify the [inert](https://html.spec.whatwg.org/multipage/interaction.html#inert) attribute on individual form controls. In these instances, the [disabled](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-disabled) attribute is probably more appropriate.**

### Do you have anything more you want to share?

_No response_

### MDN metadata

Page report details

* Folder: `en-us/web/css/reference/properties/interactivity`
* MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/interactivity
* GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/reference/properties/interactivity/index.md
* Last commit: https://github.com/mdn/content/commit/4b6027efb86db472ca6c37390fe9402b16b2716c
* Document last modified: 2026-01-24T05:02:58.000Z