The "inert" attribute is finally coming to the web
- Published at
- Updated at
- Reading time
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.
inert comes into play!
I honestly didn't believe
inert would enter the web anymore because I initially heard of the HTML attribute years ago.
Browsers are on a roll lately, and
inert is part of it!
If you want to start using it today, don't sweat it! There's also an official polyfill available.