С 11 апреля 2023 года (Baseline: Newly Available) в HTML официально поддерживается атрибут inert. Он делает элемент и всех его потомков полностью неинтерактивными: они не могут получать фокус, не реагируют на нажатия клавиш, клики мыши и вообще исключаются из всех пользовательских взаимодействий. Но при этом остаются в DOM и продолжают рендериться.

Это особенно полезно, если нужно временно отключить часть интерфейса — например, при открытии модального окна, активации блокировки, загрузке, или при переключении между вкладками.

Как это работает

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Если вы добавляете атрибут inert к контейнеру, браузер:

  • исключает все вложенные элементы из таб-ориентированного перемещения (Tab, Shift+Tab);
  • отключает кликабельность и обработку событий;
  • скрывает содержимое от вспомогательных технологий (например, скринридеров).

Пример:

<div inert>
  <button>Кнопка</button>
  <input type="text" placeholder="Введите текст">
</div>

Пока inert установлен, пользователь не сможет взаимодействовать ни с кнопкой, ни с полем ввода. Даже если явно нажать на элемент мышкой — ничего не произойдёт.

Управление через JavaScript

Чтобы включать и отключать inert динамически, можно использовать обычные методы:

const panel = document.querySelector('.side-panel')
panel.setAttribute('inert', '')
// ...
panel.removeAttribute('inert')

Это даёт возможность временно замораживать разделы интерфейса — гораздо проще и чище, чем вручную добавлять tabindex="-1", aria-hidden="true" и отменять обработчики событий.

Примеры применения

  • Блокировка фона при открытии модального окна:
modal.show()
document.body.setAttribute('inert', '')
  • Отключение вкладки, пока загружается контент.
  • Заморозка панели, пока не выполнено действие пользователя.

Почему это удобно

  • Повышает доступность: пользователи со скринридерами не будут «видеть» замороженные участки.
  • Упрощает управление фокусом: не нужно вручную перебрасывать фокус или фильтровать элементы.
  • Помогает избежать ошибок, когда пользователь случайно взаимодействует с неактуальными элементами.

Поддержка и ограничения

На момент появления inert поддерживается во всех современных браузерах, кроме некоторых устаревших версий Safari. В таких случаях можно использовать полифиллы (например, wicg-inert), если критично.

inert работает только с элементами в видимой части страницы. Он не влияет на стили — если вы хотите визуально скрыть элемент, используйте display: none или visibility: hidden отдельно.

Заключение

Атрибут inert — мощный инструмент управления доступностью и поведением интерфейса. Он позволяет временно изолировать части DOM без удаления, переключения видимости или хака с tabindex. Это особенно полезно в сложных интерфейсах, где важно точно контролировать фокус и поведение пользователя.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.