Неактивный фон и aria-modal

Даже если фокус удерживается внутри, содержимое позади модальной области всё ещё находится в DOM. Программа чтения с экрана может перейти к нему, если не заблокировать доступ.

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

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

При закрытии модальной области удалите атрибут inert, чтобы страница снова стала интерактивной. Если забыть это сделать, страница останется заблокированной.

Нативный dialog, открытый с помощью showModal(), автоматически делает остальную часть страницы неактивной, поэтому дополнительный код не нужен.

Добавление aria-modal со значением true сообщает вспомогательным технологиям, что содержимое за пределами этого диалога недоступно, пока он открыт.

Будьте внимательны: aria-modal только информирует программу чтения с экрана. Он фактически не блокирует фокус или щелчки, поэтому вам по-прежнему нужен inert.

Надёжный подход сочетает inert на фоне с aria-modal на диалоге. Первый действительно блокирует доступ, второй объявляет границу.

До того как inert получил широкую поддержку, разработчики добавляли aria-hidden фону. Это скрывало содержимое от программ чтения с экрана, но не блокировало фокус клавиатуры.

Одна из классических ошибок — применить aria-hidden настолько широко, что он охватывает и диалог. Убедитесь, что ваша модальная область не попала в скрытую область.

Откройте дерево доступности браузера при открытой модальной области. Убедитесь, что страница позади исчезла из дерева и остался только диалог. ✅

Вы научились делать страницу позади неактивной с помощью inert и объявлять aria-modal, чтобы модальная область действительно оставалась единственным доступным для пользователей содержимым. 🎯