Роль приложения доступности - PullRequest
Новая
       61

Роль приложения доступности

0 голосов
/ 11 июня 2018

Ниже приведена фиктивная реализация нашего веб-приложения. https://roleapplication.herokuapp.com/index.html

Элемент appArea имеет роль приложения, поскольку он содержит очень сложные виджеты, такие как ms paint / editor / ms office.Навигатор содержит стандартные веб-виджеты, такие как выпадающий список и кнопки

. HTML выглядит примерно так, как указано ниже.

<body> <div class="appArea" role="application"> .......//Complex widgets </div> <div class="toolbar"> ......//Buttons, dropdowns </div> </body>

Функциональность клавиатуры appArea обрабатывается его кодома для панели инструментов мы полагаемся на работу с клавиатурой с помощью программы чтения с экрана, поскольку они работают в веб-браузере.

Проблема: когда пользователь нажимает клавишу escape в области навигатора, мы размываем навигатор, поэтому фокус по умолчанию переходит на тело.Теперь, когда фокус находится в теле, клавиши со стрелками перемещают фокус на панель инструментов и, следовательно, пользователь никогда не сможет войти в appArea.Если фокус находится в appArea, он работает нормально.

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

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

Примечания к клавиатуре

  • Нажмите клавишу f6, чтобы перейти от виджета 1 к виджету 2 и перейти кнавигатор
  • Для навигации можно использовать клавиши со стрелками / табуляцией в виджетах.
  • Перейдите к навигатору с помощью клавиши f6 и нажмите клавишу tab, чтобы перейти к любой кнопке, а затем нажмите клавишу выхода.Теперь фокус на теле (проверьте с помощью document.activeElement).
  • Без программы чтения с экрана наши виджеты фиксируют ключ на теле и обрабатывают его, даже если они не имеют фокуса.
  • Однако с программой чтения с экрана,когда тело имеет фокус и пользователь нажимает стрелку вниз, программа чтения с экрана использует клавишу и перемещает фокус на навигатор, а не в область приложения с виджетами, и пользователь не может перейти к appArea с помощью клавиш со стрелками или других клавиш, которые использует программа чтения с экрана.

Примечание -

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

Ответы [ 2 ]

0 голосов
/ 21 июня 2018

Существует три способа взаимодействия с role = "application".

  1. Нажмите ввод для элемента приложения, выйдите из режима редактирования (или режима форм) и используйте приложение, как если бы это была другая веб-страница.Вы можете поместить туда другие элементы, и программа чтения с экрана будет перемещаться по этим элементам в режиме бровей.

  2. Нажмите клавишу ввода в приложении, которое переводит программу чтения с экрана в режим редактирования, где все ключи передаются виджету редактирования внутри приложения.и вы обрабатываете все в вашем приложении, возможно, при событии keydown.

  3. Управляйте tabindex, когда программа чтения с экрана нажимает клавиши, используя roving tabindex .

У вас сейчас есть 1 и 3, что действительно сбивает с толку.Если вы удалите элемент приложения, он все равно будет работать нормально.Звучит так, как будто вы хотите 2, хотя.2 настоятельно не рекомендуется, если у вас нет программы чтения с экрана, постоянно тестирующей UX или создающей ваше приложение.Номер 2 в основном для игр и считается элементом «холста» для программ чтения с экрана.Вы делаете 2, выполняя следующие действия: 

    <div role="application">
    <input type="button" autoFocus="true" value="Click me" />
    <p aria-live="polite" id="spk"></p>
    </div>

Элемент spk предназначен для отправки сообщений в программу чтения с экрана, что необходимо сделать в этом интерфейсе Window, Icon, Menu, Message (WIMM).Помните, что в этом режиме вам нужно все программировать, и пользователи расстраиваются, если ожидания не оправдываются.

Вы сказали, что создаете текстовый процессор.Этот последний вариант (номер 2) НЕ предназначен для создания текстового процессора.Как пользователь программы чтения с экрана, у меня есть ожидания и рабочие процессы для текстовых процессоров.Вы не можете получить эту функциональность, программируя ее вручную в Javascript.Вместо этого используйте существующие поля редактирования, которые HTML предоставляет по этой причине, например: Этот пример текстового редактора

Пожалуйста, дайте мне знать, если есть какая-то причина, по которой вы не хотите использовать вышеизложенноеwidget.

Вы могли бы избежать использования 3 вместе с обычными виджетами, но лучше делать то, что делает Google Drive, и разрешать пользователям переходить в режим редактирования при загрузке страницы, или нажимать клавишу, например, escape,чтобы войти в область приложения tabindex (которая не обязательно должна быть в элементе приложения, хотя это может быть).

Редактировать: после прочтения вашего вопроса звучит так, как будто вы не можете понять, каквведите элемент приложения.Вы указываете, где программа чтения с экрана говорит «приложение», и нажимаете ввод.Чтобы выйти, вы либо переходите к следующему элементу tabindex, находящемуся вне приложения, либо нажимаете специальную клавишу для выхода из приложения.В NVDA этой ключевой командой является ctrl + nvda + space.В вашем приложении элемент application является первым элементом.

0 голосов
/ 12 июня 2018

role='application' следует использовать в редких случаях.Как вы заметили, все события клавиатуры пропускают программу чтения с экрана и переходят непосредственно к вашему приложению.Это приводит к тому, что виртуальный курсор программы чтения с экрана не работает.Как правило, программа чтения с экрана автоматически переходит в режим «приложения» (часто называемый «режимом форм») для определенных типов виджетов, таких как поле ввода.Если вы используете роли виджетов , вы получите этот «режим форм» бесплатно.

Когда вы говорите, что «клавиши со стрелками» не работают, вы говорите о стрелках вверх / вниз илистрелки влево / вправо?Они имеют различное поведение для программы чтения с экрана.

...