inert attribute
inert is a boolean HTML attribute. Where it is set, the element and all of its flat tree descendants become inert. The HTML specification spells out what that means. Clicks do not land, text cannot be selected, editable content stops taking input, and the browser should skip the region in find-in-page. Inert nodes generally cannot be focused, and the browser does not expose them to accessibility APIs. MDN sums up the effect on the accessibility tree: the region drops out of the tab order and out of the tree. The modal dialog uses the same mechanism. dialog.showModal() puts the element into the top layer, and everything outside it becomes inert. So if you use showModal, you do not set inert yourself. According to MDN the attribute has been available across the major browsers since April 2023. MDN also names the limit: an inert region looks exactly as before. It stays visible; it is simply not operable.
In practice
The usual case is an overlay: an off-canvas menu, a hand-built dialog, or a form step that should hold the rest of the page still. You set inert on the region behind the overlay and remove it again on close. Two mistakes are common. The first: inert lands on a container that currently holds focus. Focus then falls back to the body, and keyboard users start again from the top on the next Tab. So move focus into the overlay first, then set the attribute. The second: inert used as a substitute for hiding. The region stays on screen with no hint that it no longer responds. Giving that hint is your job, not the browser's. A dimmed backdrop usually does it. The counter-test takes a minute: open the overlay and Tab through it. If focus lands on something behind it, inert is not doing its job. Then close the overlay and Tab through again. If a stop that used to be there is missing, the attribute was never removed.
← Back to the glossary