Атрибут inert: блокировка фокуса под модалкой без «ловушек» на коленке

Как `inert` отключает tab order и клики вне `<dialog>`, и почему это лучше, чем `pointer-events: none` на body.

Атрибут `inert` помечает поддерево DOM как «неинтерактивное»: элементы не получают фокус, не участвуют в find-in-page и не реагируют на клики — идеально для фона под открытой модалкой.

В паре с нативным `<dialog>` и `::backdrop` inert снимает необходимость вручную перебирать все focusable внутри `<main>`.

HTMLElement.inert — MDN — API и поведение inert.
Using the inert attribute — web.dev — Паттерны и доступность.

Практика

После закрытия модалки снимайте inert с `<main>` и возвращайте фокус на кнопку-триггер — иначе пользователи клавиатуры «теряются».

Не ставьте inert на весь `document` без dialog: скринридеры и SEO не пострадают, но сломается навигация по странице.