Artboard 16light, inspiration, solution, idea, innovation,Google Sheets iconSwift icon
Published at
Updated at
Reading time
2min

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.

The dialog element is soon cross-browser supported and can help with modal focus handling.

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.

Read the inert explainer if you want to learn more about inert use cases.

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!

Playground

The example demo below shows how to make elements inaccessible.
This functionality is easy to misuse, make sure to read about inert use cases before implementing it.

Preview

You can't select me!

The inert attribute makes entire subtrees inaccessible

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
chromechrome_androidedgefirefoxfirefox_androidsafarisafari_iossamsunginternet_androidwebview_android
102102102previewNon15.515.5Nei102

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

Related Topics

Related Articles