HTML reference

inert

The inert attribute makes an element and its descendants non-interactive. Users cannot click or focus the region, and assistive technologies generally skip it.

Common use: a modal background

<main id="page" inert>
  Page content behind the dialog
</main>
<dialog open>Confirm this action</dialog>

When a modal opens, the application can add inert to the page behind it. When the modal closes, remove the attribute and restore focus to a sensible element.

inert is not hidden

hidden removes content from presentation. inert can leave content visible while preventing interaction. Use the one that matches the user's mental model, and do not leave important content permanently unreachable.

Accessibility notes

• Move focus into an open modal and keep it there while the modal is active.
• Provide a clear close control.
• Remove inert before returning focus to content behind the modal.

Related pages

• hidden
• dialog
• ARIA
• English HTML reference