inert глобальный атрибут HTML

inert — это глобальный атрибут, являющийся логическим атрибутом, который указывает, что элемент и все его потомки в плоском дереве становятся инертными. Атрибут inert можно добавить к разделам содержимого, которые не должны быть интерактивными. Инертный элемент и все его потомки, включая обычно интерактивные элементы, такие как ссылки, кнопки и элементы управления формами, отключаются, поскольку они не могут получать фокус или реагировать на щелчки. Атрибут inert также можно добавить к элементам, которые должны находиться за пределами экрана или быть скрыты. Инертный элемент вместе с его потомками исключается из порядка обхода клавишей Tab и дерева специальных возможностей.

Модальные элементы <dialog>, созданные с помощью showModal(), не наследуют инертность от своих предков, но их можно сделать инертными, явно задав им атрибут inert. Ни один другой элемент не может избежать инертности.

Инертные элементы HTML и их потомки в плоском дереве:

• Не генерируют события click при щелчке.
• Не могут получать фокус, и для них не могут генерироваться события focus.
• Не доступны для поиска с помощью функции поиска по странице в браузере (их содержимое не находится и не выделяется).
• Не позволяют пользователям выделять текст внутри своего содержимого — аналогично использованию свойства CSS user-select для отключения выделения текста.
• Не позволяют редактировать содержимое, которое в противном случае можно было бы редактировать. Например, это относится к содержимому текстовых полей <input> и текстовых элементов с атрибутом contenteditable.
• Скрыты от вспомогательных технологий, поскольку исключены из дерева специальных возможностей.

Чтобы перевести элемент и его потомков в инертное состояние, можно также использовать следующие возможности:

• Свойство CSS interactivity.
• Свойство DOM HTMLElement.inert.

Особенности доступности

Тщательно продумайте вопросы доступности, прежде чем применять атрибут inert. По умолчанию визуально определить, является ли элемент или его поддерево инертным, невозможно. Как веб-разработчик, вы несёте ответственность за то, чтобы чётко обозначить активные и инертные части содержимого.

Предоставляя визуальные и невизуальные подсказки об инертности содержимого, помните также, что область просмотра может отображать лишь отдельные разделы содержимого. Пользователи могут увеличить небольшой участок страницы или вовсе не иметь возможности просматривать содержимое. Если инертные разделы не обозначены явно, это может привести к разочарованию и ухудшить взаимодействие с сайтом.

Примеры

В этом примере второй элемент <div> и все его потомки становятся инертными благодаря атрибуту inert:

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

Спецификации

Совместимость с браузерами

См. также

• Элемент HTML <dialog>
• Свойство DOM HTMLElement.inert
• Свойство CSS interactivity