Agent Wranglers

Accessibility Recommended

Lock the page behind open menus

Make everything behind an open menu or dialog unreachable with the inert attribute.

By Erik Bergstedt, Agent Wranglers. Updated .

How to do it

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.

Example

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

How to check

With the menu open, Tab cannot reach anything behind it.

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.