The HTML inert Global Attribute and its Usecases

As a web developer, you may encounter situations where you need to disable user interaction with certain elements on a webpage. One relatively recent way to achieve this is by using the inert HTML global attribute. This attribute makes an element and all of its descendants non-interactive and un-focusable, effectively disabling user input events such as clicks, touches, and keyboard events.

Example

To use the inert attribute, simply add it to the HTML element you want to make inert:

<button inert>Not working!</button>
<button>Working!</button>

If we add some click handlers to those buttons you can see how the first button is non-interactive while the second one works as expected.

The inert property will also apply to all descendents so you can disable entire sections of your page.

<div inert>
  <button>Not working!</button>
  <button>Also not working!</button>
</div>

Usecases

Modals

Probably the most common usecase for the inert property would be for creating a modal. When a modal is opened you do not want the user to be able to interact with the content beneath it so you can set that as inert while keeping the modal div and the overlay div interactable so that it can be closed when needed.

Navigation

The inert property can be used when creating complex navigation especially with dropdowns. For example When a nested menu is opened you could make the rest of the menu inert so that users don't accidentally click outside of the section they have currently selected.

Forms

Complex forms can also benefit from the inert property as you are able to fully guide the user through filling out the information without providing too many options at once and confusing them.

Interactive experiences

More advanced experiences such as games or multimedia can be enhanced by using the inert property to disable elements that shouldn't be interacted with at a given time. For example if you have a game that involves dragging and dropping objects within the page then you could disable some of the other buttons during this actions so they are not accidentally clicked.

Caveats

Browser support

While relatively new, the inert property is supported by all major browsers with the exception of Firefox.

Accessibility

Disabling elements should be done only when you have a good reason, as this can cause several accessibility issues. First there is no visual indication that an element is disabled so it is up to the engineers to provide some sort of cue. Second, the elements with inert set to true may be removed from the accessibility tree for assistive technologies.

Conclusion

The inert HTML global attribute is a powerful tool that can be used to disable user interaction with elements on a webpage. By using the inert attribute strategically, you can create more intuitive and user-friendly experiences for your website's visitors. However it is important to use it sparingly and in addition to other approaches as it can have negative impacts on accessibility.