04.02.2026 08:32
🚫 Перестаньте использовать pointer-events: none для блокировки UI Когда вы открываете Side-menu (шторку), показываете л
🚫 Перестаньте использовать pointer-events: none для блокировки UI
Когда вы открываете Side-menu (шторку), показываете лоадер или переключаете шаги в форме, часто нужно «заморозить» взаимодействие с определенной частью страницы.
🐢 Старый (плохой) способ: Вешаем CSS-класс .disabled:
.disabled {
opacity: 0.5;
pointer-events: none; /* Блокирует клики */
user-select: none;
}
Почему это плохо? Это визуальный обман.
1. Пользователь всё еще может попасть внутрь фокусом через Tab.
2. Пользователь может нажать Enter на кнопке, которую «нельзя нажать».
3. Скринридеры (VoiceOver, NVDA) продолжают читать этот контент, путая незрячих пользователей.
🚀 Правильный способ: Атрибут inert
Это глобальный HTML-атрибут, который делает элемент и всех его детей полностью неактивными для браузера.
<main id="main-content" inert>
<button>Я не нажимаюсь</button>
<input placeholder="В меня нельзя писать" />
</main>
<aside id="sidebar">
<button>Я работаю!</button>
</aside>
Что делает inert под капотом:
1. pointer-events: none: Клики и ховеры игнорируются.
2. tabindex="-1": Элемент и все его потомки исключаются из Tab-навигации.
3. aria-hidden="true": Дерево доступности (A11y Tree) игнорирует этот узел (скринридеры молчат).
4. Запрет выделения: Текст нельзя выделить мышкой.
Как переключать в JS: Это обычное свойство DOM-элемента, как disabled или hidden.
const main = document.getElementById('main-content');
const loaderVisible = true;
// Одной строкой выключаем всё взаимодействие с main
main.inert = loaderVisible;
👉 @frontend_1
Когда вы открываете Side-menu (шторку), показываете лоадер или переключаете шаги в форме, часто нужно «заморозить» взаимодействие с определенной частью страницы.
🐢 Старый (плохой) способ: Вешаем CSS-класс .disabled:
.disabled {
opacity: 0.5;
pointer-events: none; /* Блокирует клики */
user-select: none;
}
Почему это плохо? Это визуальный обман.
1. Пользователь всё еще может попасть внутрь фокусом через Tab.
2. Пользователь может нажать Enter на кнопке, которую «нельзя нажать».
3. Скринридеры (VoiceOver, NVDA) продолжают читать этот контент, путая незрячих пользователей.
🚀 Правильный способ: Атрибут inert
Это глобальный HTML-атрибут, который делает элемент и всех его детей полностью неактивными для браузера.
<main id="main-content" inert>
<button>Я не нажимаюсь</button>
<input placeholder="В меня нельзя писать" />
</main>
<aside id="sidebar">
<button>Я работаю!</button>
</aside>
Что делает inert под капотом:
1. pointer-events: none: Клики и ховеры игнорируются.
2. tabindex="-1": Элемент и все его потомки исключаются из Tab-навигации.
3. aria-hidden="true": Дерево доступности (A11y Tree) игнорирует этот узел (скринридеры молчат).
4. Запрет выделения: Текст нельзя выделить мышкой.
Как переключать в JS: Это обычное свойство DOM-элемента, как disabled или hidden.
const main = document.getElementById('main-content');
const loaderVisible = true;
// Одной строкой выключаем всё взаимодействие с main
main.inert = loaderVisible;
👉 @frontend_1