HTML-атрибут inert

inert — это глобальный HTML-атрибут, который делает элемент и всех его потомков неинтерактивными.

Когда элемент содержит inert, то:

• на него нельзя кликнуть

• его элементы нельзя сфокусировать

• они исключаются из tab-навигации

• screen reader игнорирует их

Пример:

<div inert>
  <button>Button</button>
  <a href="#">Link</a>
</div>

Все элементы внутри блока становятся неактивными.

Проблема, которую решает inert

Частая задача интерфейса — временно отключить часть страницы.

Например:

• открыт модальный диалог

• показывается loader

• открыто боковое меню

• выполняется отправка формы

Без inert это обычно делают через комбинацию:

• pointer-events: none

• tabindex="-1"

• aria-hidden

• JS-обработчики

Это сложно и легко сломать.

inert решает все эти проблемы одной строкой.

Пример 1. Блокировка фона при открытии модального окна

Один из самых частых сценариев.

<main id="content">
  <button>Button</button>
  <a href="#">Link</a>
</main>

<dialog id="modal">
  <button id="close">Close</button>
</dialog>

Когда открывается модалка, фон можно сделать inert.

const content = document.getElementById("content")
const modal = document.getElementById("modal")

function openModal() {
  content.inert = true
  modal.showModal()
}

function closeModal() {
  content.inert = false
  modal.close()
}

Теперь:

• элементы фона не кликаются
• tab-навигация не попадает туда
• screen reader игнорирует фон

Пример 2. Блокировка формы во время запроса

Когда форма отправляется на сервер, нужно временно отключить её элементы.

<form id="form">
  <input>
  <button>Send</button>
</form>

const form = document.getElementById("form")

async function submitForm() {
  form.inert = true

  await fetch("/api")

  form.inert = false
}

Это предотвращает:

• повторные клики

• tab-навигацию

• случайное изменение данных

Пример 3. Loading overlay

Иногда нужно заблокировать часть страницы, пока грузятся данные.

<div id="panel">
  <button>Refresh</button>
</div>

panel.inert = true

Элементы остаются видимыми, но становятся неинтерактивными.

Важная особенность: inert не меняет внешний вид

inert влияет только на поведение, но не на стиль.

Поэтому часто добавляют CSS:

[inert] {
  opacity: 0.6;
  pointer-events: none;
}

Это делает состояние интерфейса понятным пользователю.

Чем inert отличается от других решений

inert:

• отключает все события

• убирает tab-навигацию

• убирает из accessibility tree

Наследование inert

Атрибут действует на весь subtree.

<div inert>
  <section>
    <button>Button</button>
  </section>
</div>

Кнопка автоматически становится неактивной.

Ограничение: нельзя переопределить inert у потомков

Если родитель inert, то потомок не может быть активным.

child.inert = false

Это не сработает.

Особенность dialog

Элемент <dialog> может выйти из inert-контекста, когда открывается через showModal().

Это позволяет делать модальные окна поверх inert-контента.

Когда inert использовать не стоит

inert полезен для блокировки целых частей интерфейса.

Но он избыточен, если нужно:

Отключить одну кнопку:

<button disabled>

Перехватить события:

pointer-events: none;

Итог

inert — простой способ сделать часть интерфейса неинтерактивной.

Он особенно полезен для:

• модальных окон

• loading состояний

• блокировки формы

• отключения фонового контента

Атрибут позволяет заменить сложные комбинации tabindex, aria-hidden и pointer-events одним свойством.

«Интерактивный» пример

Данная ссылка никак не отреагируют на нажатие или фокус, так как весь абзац имеет атрибут inert.

Поддержка