The HTML `inert` Attribute: A New Way to Manage User Focus

What is the `inert` attribute?

The `inert` attribute is a new HTML feature that allows developers to create interactive space components, such as modals, while managing user focus activities in a more guided manner than trapping. By making temporarily unneeded areas of a page inaccessible instead of trapping a user to specific areas, it leaves all focus-related activities to the interactive spaces themselves.

Using the `inert` attribute

To use `inert`, simply add the attribute to an element, and that part of the markup becomes frozen or guarded. Possible interactions like clicks and focus change attempts with both mice and keyboards become unavailable.

<div inert>
  <p>This content is now inaccessible.</p>
</div>

Accessibility benefits

`inert` is also synonymous with accessibility, meaning not only do the elements it’s applied to become inaccessible to visual interactions, but also to assistive technologies found in mobile devices.

Potential use cases

• Custom confirm boxes: `inert` can be used to implement custom confirm boxes that adapt the schema of apps being built, doing away with default browser-specific custom boxes.
• Authentication forms: With modal components like prompts, important notifications, and obligatory authentication forms, it is appropriate to use `inert`. `inert` can easily guide a user to the interactive element without worrying about accessibility.
• Slide-out navigation menu: With slide-out side navigation menus, `inert` can be used to guide users’ attention to the navigation element, avoiding mouse clicks and keyboard navigation on the page behind it.

Browser compatibility

At the time of writing, the HTML `inert` feature has compatibility support for all the latest versions of major browsers, including mobile and desktop, except for Firefox. To make sure that web apps don’t break or malfunction while using `inert`, as might be the case with incompatible browsers, developers should use its polyfill.

// Include the inert polyfill
import 'undefinedcdn.jsdelivr.net/npm/[email protected]/dist/inert.min.js';

Conclusion

`inert` is a powerful tool for creating interactive space components while managing user focus activities in a more guided manner than trapping. Its support for assistive technologies makes it a great choice for developers who want to create accessible and user-friendly interfaces.