Атрибут inert: временно неинтерактивная область
Inert делает поддерево документа неинтерактивным и исключает его содержимое из обычного фокуса и дерева доступности. Это инструмент управления состоянием интерфейса, а не просто декоративное затемнение.
Назначение
Inert делает поддерево документа неинтерактивным и исключает его содержимое из обычного фокуса и дерева доступности. Это инструмент управления состоянием интерфейса, а не просто декоративное затемнение.
Как это работает
Атрибут логический: само его наличие включает состояние. Содержимое может оставаться видимым, поэтому причину недоступности нужно объяснить вне inert-области. Ниже показан неподвижный учебный макет без настоящей отправки.
Пример
<p>Предпросмотр формы: ввод в этой области пока недоступен.</p>
<section inert style="opacity:.65"><label for="preview-title">Название</label><input id="preview-title" value="Учебный пример"><button type="button">Сохранить</button></section>
<button type="button">Доступная кнопка вне предпросмотра</button>Что должно получиться
Поле и кнопка внутри области пропускаются при обычном обходе клавиатурой, внешняя кнопка остаётся доступной. Сам текст объяснения не скрыт внутри неактивного поддерева.
Граница применения и частая ошибка
Inert не заменяет авторизацию и не защищает данные от просмотра в исходнике. В отличие от disabled он не задаёт правила отправки полей формы. Не отключайте область, внутри которой остаётся текущий фокус, без продуманного перехода к доступному элементу.
Самостоятельная проверка
Пройдите страницу клавишей Tab и проверьте дерево доступности. Удалите inert в своём файле и повторите проверку. Сравните это состояние с disabled на отдельном поле, не делая вывода только по внешнему виду.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.