Инертный атрибут

Emma Twersky

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

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

Вы можете использовать атрибут inert для достижения такого же поведения на других элементах.

Инертность означает отсутствие возможности двигаться, поэтому, когда вы отмечаете что-то инертное, вы удаляете движение или взаимодействие из этих элементов DOM.

<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>

Здесь inert объявлен для второго элемента <div> , содержащего button2 , поэтому весь контент, содержащийся в этом <div> , включая кнопку и метку, не может получить фокус или на него невозможно щелкнуть.

Атрибут inert особенно полезен для обеспечения доступности, в частности, для предотвращения захвата фокуса.

Лучшая доступность

Рекомендации по обеспечению доступности веб-контента требуют управления фокусом и разумного и удобного порядка фокуса . Это включает в себя как открываемость, так и интерактивность. Раньше возможность обнаружения можно было подавить с помощью aria-hidden="true" , ​​но интерактивность сделать сложнее.

inert дает разработчикам возможность удалить элемент из порядка табуляции и из дерева доступности. Это позволяет вам контролировать как возможность обнаружения, так и интерактивность, а также дает возможность создавать более удобные и доступные шаблоны.

Существует два основных варианта применения inert к элементу для обеспечения лучшей доступности:

• Когда элемент является частью дерева DOM, но находится за кадром или скрыт.
• Когда элемент является частью дерева DOM, но должен быть неинтерактивным.

Заэкранные или скрытые элементы DOM

Одна из распространенных проблем доступности связана с такими элементами, как ящик, которые добавляют в DOM элементы, которые не всегда видны пользователю. С помощью inert вы можете гарантировать, что, хотя подэлементы ящика находятся за пределами экрана, пользователь клавиатуры не сможет случайно с ним взаимодействовать.

Неинтерактивные элементы DOM

Другая распространенная проблема доступности — это когда дизайн пользовательского интерфейса виден или частично виден, но явно неинтерактивен. Это может произойти, например, во время загрузки страницы, во время отправки формы или при открытом наложенном диалоговом окне.

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

Захват фокуса

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

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

• Блокирующие элементы, такие как модальное диалоговое окно, меню захвата фокуса или боковая навигация.
• Карусель с неактивными элементами.
• Неприменимое содержимое формы (например, затухание и отключение полей «Адрес доставки» при установленном флажке «То же, что и адрес выставления счета»).
• Отключение всего пользовательского интерфейса в несогласованном состоянии.

Визуально обозначьте inert элементы

По умолчанию визуальная индикация инертности поддерева отсутствует. Рекомендуется четко обозначить, какие части DOM активны, а какие инертны.

[inert], [inert] * {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

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

Какие взаимодействия и движения заблокированы?

По умолчанию inert блоки фокуса и событий щелчка. Для вспомогательных технологий это также блокирует вкладку и возможность обнаружения. Браузер также может игнорировать поиск по странице и выделение текста в элементе.

Значение inert по умолчанию — false .