Native HTML: Inert

Today we'll be looking at the inert property, this was suggested by @vinceumo in the comments of my last post, thanks Vincent. inert is in the spec but has not yet been adopted by any of the main browsers, that being said, it is available behind a flag in Blink (Chrome and Opera).

inert is really important for users navigating your website with their keyboards but also it makes the page a lot more friendly for all users.

The inert property

We finally get to return to the Mozilla site to get our definition! Though inert is only mentioned as part of the HTMLElement and does not have its own page just yet.

HTMLElement.inert
Is a Boolean indicating whether the user agent must act as though the given node is absent for the purposes of user interaction events, in-page text searches ("find in page"), and text selection.

Let's break it down, we know it's a boolean property which means it's either inert or it's not. This tells us all the syntax information we need.

<!-- The main content is not inert -->
<main id="content">
  ...
</main>

<!-- The navigation panel is inert -->
<aside id="nav" inert>
  <nav>
    ...
  </nav>
</aside >

Great, now we know how to use it let's read what it actually does. We see that it instructs the browser to "act as though the given node is absent" which means we can't click on, tab to or select the element also its text is hidden from the find in page feature you get with most browsers. But, importantly, it remains visible.

But... Why?

I've taken that same code structure as above and hidden my menu my moving it over to the right, as you would with a slide-in menu. I've written a little bit of JS to tell us which element has is currently selected. Try and tab through past the Anchors you could also try trying to find "Menu-item", you'll see there are 4 results but the browser doesn't know where they are.

This is just one example but think about other things like modal dialog-boxes, their contents when hidden or everything else when the modal is open, or carousels with buttons.

References

There are some great places to read more about I'd start with the wicg page about it. There is also @robdodson's a11ycast video from a couple of years back.

Signing off

A11y is becoming more and more important as we strive to make the web a place for everyone, attributes like this really are a step in the right direction.

I really hope you learnt something or, at least, enjoyed the read. If I've got something wrong please let me know, that's how we all learn. And please suggest any future post ideas you'd like me to explore.

Thank you for reading.
🦄🦄❤🦄❤❤🦄🦄🦄❤❤