Ролевое приложение для специальных возможностей

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

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

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

3. Управляйте tabindex, когда программа чтения с экрана нажимает клавиши, используя подвижный 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 предоставляет по этой причине, например: Этот пример текстового редактора

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

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

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

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

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