Часто виникає потреба “вимкнути” якийсь елемент, щоб він узагалі жодним чином не реагував на дії користувача: ні на кліки, ні на фокус. Зазвичай це або pointer-events: none, або event.preventDefault(), чи якісь інші трюки. А то й усе вкупі з tabindex="-1".
Однак в HTML уже давно існує спосіб надійно позбавити елемент будь-якої інтерактивности, а ба більше — викинути його з accessibility tree, “заховавши” від очей скринрідерів.
Це атрибут
inert, який відображає однойменну властивість DOM-елемента:<main id="my-content" inert>
<p>Щось неважливе</p>
</main>
Що в JS робиться ось так:
document.getElementById('my-content').inert = true;Якщо зробити елемент інертним, то весь його вміст стане повністю й остаточно неактивним для користувача, а також повністю зникне з радарів скринрідерів. І так, “розінертити” дочірні елементи не вийде — атрибут inert не має значення false, і інертність завжди наслідується.
І ви не будьте інертними — ставте вподобайки та поширюйте допис.
inert входить до Baseline з 2023 року й підтримується всіма основними браузерами. Проте, у Safari (очікувано) є один нюанс: текст усередині inert-елемента все ще можна знайти при пошуку по сторінці (Cmd+F).
Чи можна його використовувати вже? Абсолютно так. За винятком цього невеликого бага, inert працює однаково й передбачувано в усіх браузерах, дозволяючи одним-єдиним атрибутом уникнути потреби городити купу костилів лише для того, щоб користувач не міг клікнути або табнутись у якийсь елемент.
Цим фактом особливо спішу з вами поділитись, бо сам дізнався про inert, обираючи тему для наступного допису.
А для вас це теж новина?
MDN
@babichdev