Атрибут 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 .