---
title: "Lock the page behind open menus · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/accessibility/inert-attribute
updated: 2026-10-20
licence: "All rights reserved"
---

# Lock the page behind open menus

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Accessibility](https://agentwranglers.se/playbook/website/accessibility)
- Rule: Make everything behind an open menu or dialog unreachable with the `inert` attribute.
- How: When an overlay opens, set `inert` on the parts behind it, such as `main` and `footer`. Remove it on close. A modal `dialog` opened with `showModal()` does this for you, but a popover does not.
- Check: A browser test opens the menu and presses Tab 50 times. Focus never lands on an element inside the parts marked `inert`.

Example:

```js
function setMenuOpen(open) {
  for (const el of document.querySelectorAll('main, footer')) el.inert = open;
}
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/inert-attribute`.

- Previous: [Let people skip to the content](https://agentwranglers.se/playbook/website/accessibility/skip-links)
- Next: [Use the right element for the job](https://agentwranglers.se/playbook/website/accessibility/semantic-html)
- [Accessibility](https://agentwranglers.se/playbook/website/accessibility)