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

Короткий ответ

pointer-events: none делает элемент «прозрачным» для мыши: щелчки проходят сквозь него к тому, что ниже:

<style>
  .box { position: relative; width: 220px; }
  .label { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(255 255 255 / 0.6); pointer-events: none; }
</style>
 
<div class="box">
  <button onclick="this.textContent = 'Clicked!'">Click through the layer</button>
  <div class="label">A layer on top</div>
</div>

Так поступают с декоративными слоями, подписями и иконками поверх кнопок и полей.

Заблокировать целую область

Атрибут inert отключает блок целиком: по нему нельзя щёлкнуть, внутрь нельзя попасть клавишей Tab, а скринридер его пропускает:

<div inert style="opacity: 0.5;">
  <button>Not available</button>
  <a href="#">Neither is this link</a>
</div>
<button>Available</button>

Это удобно для части формы, которая ещё недоступна, или для страницы под открытым окном.

Кнопки и поля

Для одной кнопки или поля есть атрибут disabled — он ещё и сообщает браузеру и скринридеру, что элемент неактивен.

Частая ошибка

Кнопку или ссылку «отключают» свойством pointer-events: none. Мышью нажать нельзя, но с клавиатуры элемент по-прежнему получает фокус и срабатывает по Enter. Для элементов управления используйте disabled или inert, а pointer-events оставьте для оформления.