Как диалоговое окно должно объявлять динамический контент пользователям программы чтения с экрана?

У меня есть <dialog> элемент, который при открытии запрашивает некоторый контент с сервера, используя AJAX. Когда содержимое возвращается (что, конечно, может длиться какое-то время в зависимости от скорости соединения и объема содержимого), новое содержимое динамически добавляется в диалоговое окно.

Как я могу заставить пользователей программы чтения с экрана знать, что этот контент теперь существует и что он может перейти к нему? Следует ли переместить фокус на контент после его вставки?

Я использую библиотеку a11y-dialog, чтобы открыть диалог.

У меня есть контейнер для dialog настроить с aria-live="polite" и добавить aria-busy="true" как только я запускаю запрос AJAX.

aria-busy затем устанавливается на false когда AJAX-запрос возвращается и содержимое добавляется в контейнер.

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

Это HTML-код для dialog, Контейнер AJAX имеет идентификатор #dialog-ajax-wrapper,

<div class="dialog js-dialog" id="dialog" hidden>

    <div class="dialog__overlay" tabindex="-1" data-a11y-dialog-hide></div>

    <dialog class="dialog__native" aria-labelledby="dialog-title">
        <div class="dialog__inner">

            <button class="dialog__close" type="button" data-a11y-dialog-hide aria-label="Close dialog window">
                X
            </button>

            <div class="dialog__ajax" id="dialog-ajax-wrapper" aria-live="polite"></div>

            <div class="dialog__loader" aria-hidden="true"><div class="loader"></div></div>

        </div> <!-- /.dialog__inner -->
    </dialog>
</div>

Я ожидаю, что факт загрузки контента будет объявлен каким-то образом, чего в настоящее время нет. Затем, когда контент вставлен, он объявляется, но не читается полностью.

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

Это правильный метод или есть лучший способ?

Источник

1 ответ

Решение

Как я могу заставить пользователей программы чтения с экрана знать, что этот контент теперь существует и что он может перейти к нему? Следует ли переместить фокус на контент после его вставки?

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

Как правило, правила размещения фокуса в диалоге таковы:

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

Таким образом, в вашем случае вы правы, фокус должен оставаться на кнопке OK или закрыть, и не должен быть перемещен.

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

Не беспокойтесь о длине текста. Конечно, есть способы прекратить чтение до конца, повторяя, читая один абзац, один перевод или одно слово за раз.

  • Челюсти или NVDA под windows:
    • Стрелки для чтения
    • Ctrl, чтобы заткнуться
  • Под iOS с VoiceOver
    • Размах влево / вправо и ротор читать
    • Два пальца коснитесь, чтобы заткнуться
  • и т.п.

Я призываю вас читать документацию или следить за результатами нескольких программ чтения с экрана. Наиболее популярными являются Jaws и NVDA под Windows, VoiceOver под Mac и iOS, Talkback под Android...

Я ожидаю, что факт загрузки контента будет объявлен каким-то образом, чего в настоящее время нет.

Если загрузка происходит достаточно быстро, нет никакой причины, по которой загрузка будет объявлена ​​вообще. Я надеюсь, что это ваш случай. По сути, как только появляется диалоговое окно, я бы не хотел долго ждать контента.

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

Вы можете показать отдельный индикатор загрузки вместо пустого диалога. Если вы это сделаете, не забудьте использовать aria-live, чтобы объявить загрузку.

Затем, когда контент вставлен, он объявляется, но не читается полностью.

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

Источник

Модальные окна всегда труднодоступны, и они будут до элемент полностью принят.

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

Источник
Другие вопросы по тегам