Справочник HTML & CSS

inert

Делает часть страницы неактивной: по ней нельзя кликнуть, перейти клавишей Tab или выделить текст.

Синтаксис

<main inert>…</main>

Примеры

Блок виден, но не реагирует:

<style>
  [inert] { opacity: 0.5; }
</style>
 
<div inert>
  <button>Can't click me</button>
  <a href="#">Can't follow me</a>
</div>
<button>But I work</button>

Примечания

Удобно, когда открыта боковая панель или своё модальное окно: остальную страницу делают inert, чтобы фокус не убегал за окно. Встроенный <dialog> с showModal() делает это сам. Атрибут не меняет внешний вид — приглушить блок нужно в CSS.

См. также

hidden — Скрывает элемент: он не показывается и недоступен программам чтения с экрана.
<dialog> — Диалоговое окно; модальное открывается методом `showModal()` и блокирует остальную страницу.
tabindex — Управляет тем, можно ли перейти к элементу клавишей Tab.

Вопросы и ответы по теме

Как сделать элемент некликабельным

В учебнике

Доступность — Как сделать страницу удобной для всех — работа с клавиатуры, фокус, подписи и alt, aria-label, контраст и смысловые теги.

Спасибо, что читаете!