You don't know HTML: inert

Несколько лет назад в HTML появился глобальный атрибут inert. Он позволяет делать часть страницы инертной, то есть недоступной для взаимодействия. Это нужно при разработке модальных компонентов.

Например, модальный диалог согласно рекомендациям должен отображаться поверх страницы, замыкать в себе фокус и не давать взаимодействовать со страницей. Чтобы реализовать такое поведение, нужно изрядно постараться и написать много Javascript.

Атрибут inert решает задачу более простым способом. Это глобальный атрибут, поэтому его можно добавить к любому элементу. Когда атрибут установлен, происходит следующее:
- все дочерние интерактивные элементы становятся недоступными для взаимодействия, как будто для них установлено свойство pointer-events: none
- все дочерние интерактивные элементы пропадают из последовательности табуляции, как будто для них установлен атрибут tabindex="-1"
- элемент вместе со своими дочерними элементами скрывается из дерева доступности, как будто для них установлен атрибут aria-hidden="true".

<main inert>
  <p><!-- контент --></p>
  <p><a href="/">ссылка</a></p>
  <p><!-- контент --></p>
  <button type="button">Удалить</button>
</main>

<div role="dialog" aria-modal="true" aria-labelledby="dialog-heading">
  <h2 id="dialog-heading">
    Вы действительно хотите удалить запись?
  </h2>
  <button type="button">Да</button>
  <button type="button" autofocus>Нет</button>
</div>

Таким образом, пользователь не сможет взаимодействовать с инертной частью страницы, а скринридеры не будут её зачитывать.

#ydkhtml