The "inert" attribute is finally coming to the web (#blogPost)

There are UI scenarios when you want to make particular page areas inaccessible to whoever clicks around. For example: let's assume you fade in a modal dialog asking the user if they want to delete their account?

Do you want them to interact with inputs while this question hangs around? Most likely not.

But how do you prevent people from doing precisely this? Covering the page with a faded-in semi-transparent div won't cut it because it's still possible to tab around and focus other areas and elements on the page using the keyboard. Folks using assistive technology might miss the dialog and navigate away, not realizing that their account is up for deletion.

Or to name another example: if you navigated sites with the keyboard you might have found yourself tabbing into offscreen and invisible areas. A sliding side navigation could be invisible to you but accessible via the keyboard. This situation is just confusing and no great user experience.

What you're looking for in these scenarios is a way to make page areas inaccessible. Rendered DOM elements shouldn't be focusable, clickable, editable, or selectable. They should become inaccessible.

That's where inert comes into play!

[Interactive component: visit the article to see it...]

I honestly didn't believe inert would enter the web anymore because I initially heard of the HTML attribute years ago.

But now, Safari Tech Preview ships it with v143, Chrome will enable the attribute with Chrome 102 in May and Firefox implements the feature behind the html5.inert.enabled flag.

Browsers are on a roll lately, and inert is part of it!

MDN Compat Data (source)

Browser support info for inert attribute

60*	60*	79*	81*	81*	preview*	Nö	Nö	Non

* Please check MDN for more details.

If you want to start using it today, don't sweat it! There's also an official polyfill available.