Краткий ответ
Ответ - «это зависит». По сути, если модальный режим не может быть отклонен каким-либо образом, он становится «ловушкой клавиатуры» и, таким образом, нарушает WCAG.
Однако, если вы правильно структурируете его, модальный режим, блокирующий страницу во время загрузки API, является совершенно допустимым (и не может быть отклонено во время загрузки страницы), но есть несколько вещей, которые необходимо сделать, чтобы убедиться, что это доступно.
1. Удостоверьтесь, что при загрузке этого модального режима больше ничего на странице не может быть сфокусировано.
Самая большая проблема, которую я вижу в большинстве модалов, заключается в том, что они позволяют фокусироваться вне их.
Вы не можете просто запретить пользователям использовать клавишу tab , так как большинство пользователей программ чтения с экрана перемещаются по странице (они используют ярлыки для заголовков (h1-h6), гиперссылки и т. Д. *). 1091 *.).
По этой причине убедитесь, что ваш модал находится за пределами вашего <main>, а ваш <main> и другие основные ориентиры, которые содержат информацию, содержат aria-hidden="true" и добавив tabindex="-1" к так что ничто не может быть сфокусировано.
Очевидно, это зависит от структуры вашего документа, поэтому вам нужно будет протестировать его, но правильно структурированный документ HTML будет работать с вышеуказанным методом.
2. Убедитесь, что пользователь программы чтения с экрана знает, что страница занята и что-то загружается.
Существует несколько способов сделать это. Лучше всего использовать регион арии
Добавление aria-live="polite" и aria-busy="true" в раздел, который вы обновляете, является односторонним (если вы обновляете одну часть страницы) .
Однако в ваших обстоятельствах я бы создал раздел внутри модального aria-live="assertive" и не использовал бы aria-busy (поскольку вы будете скрывать весь контент на шаге 1, поэтому aria-busy не будет применяться) .
Затем я обновлял бы сообщение каждую секунду или две для длительных загрузок (т. Е. «Загрузка», «все еще загрузка», «почти загрузка» и т. Д. c. Или, еще лучше, процент загрузки, если ваш скрипт позволяет .)
Как только содержимое страницы загружено, вам не нужно говорить «загружено», вместо этого убедитесь, что у вас есть заголовок раздела или страницы с добавленным tabindex="-1", который точно описывает содержимое который только что был загружен.
Как только загрузка завершится, программно сфокусируйте этот заголовок, и пользователь будет знать, что загрузка завершена.
3. Убедитесь, что в случае сбоя вызова API вы передаете что-то значимое обратно в программы чтения с экрана
При сбое вызова API (обратите внимание, я сказал, когда, а не если!), Убедитесь, что ваш JavaScript может обработайте это изящным способом.
Предоставьте значимое сообщение в пределах вашего модального aria-live региона, которое объясняет проблему. Старайтесь не указывать коды ошибок (или делать их короткими, ничем не хуже, чем слышать строку кода 16 git в программе чтения с экрана для кода ошибки), но вместо этого оставляйте его простым, например «ресурс занят, повторите попытку позже» или « данные не получены, пожалуйста, попробуйте еще раз 'et c.
В этом регионе я бы также добавил одну или две кнопки, которые позволяют повторять / go назад / переходить на новую страницу в зависимости от того, что подходит для ваших нужд.
4. Что касается длительного времени загрузки, дайте пользователю знать, что происходит.
Я рассмотрел это в пункте 2, но просто для того, чтобы подчеркнуть это, убедитесь, что вы сообщаете пользователям, что все еще загружается, если есть долгое время загрузки. Обновление вашего aria-live региона.
Нет ничего хуже, чем задаться вопросом, загрузилась ли страница и разработчики забыли вам сообщить.
5. Дайте возможность отменить вызов API, чтобы он не стал ловушкой для клавиатуры.
Очевидно, что большая проблема с целой модальной страницей заключается в том, что это клавиатурная ловушка .
Чтобы убедиться, что это не проблема, убедитесь, что вы предоставили кнопку cancel.
Убедитесь, что ясно, что это отменит загрузку страницы, но не полагайтесь только на JavaScript.
Вместо этого сделайте это <a> в стиле кнопки, которая либо указывает на текущую страницу, либо на предыдущую страницу (опять же в зависимости от ваших потребностей) и добавьте role="button".
Затем перехватите этот щелчок с JavaScript, чтобы он мог функционировать как кнопка.
Причина этого заключается в том, что когда ваш JavaScript дает сбой (и снова - когда, а не если), у пользователя все еще есть способ добраться до значимого страницы, таким образом избегая ловушки клавиатуры.
Это один из немногих случаев, когда вы должны использовать привязку в качестве кнопки, как запасной вариант!
Этим вы гарантируете, что пользователь всегда имеет способ избежать модальности.
Вы также можете разрешить пользователю использовать клавишу Es c для закрытия / отмены, но это опять-таки зависит от вас и ваших обстоятельств.