Доступность - блокировка фокуса ломается клавишами со стрелками при использовании JAWS

Question

У меня есть функция, которая блокирует фокус внутри диалога.

<div role="dialog" aria-label="test dialog">
    <input type="text" id="a"/><br />
    <input type="text" id="b"/><br />
    <input type="text" id="c"/><br />
    <input type="text" id="d"/><br />
    <button id="buttonA">a</button>
    <button id="buttonB">b</button>
    <button id="buttonC">c</button>
</div>

При использовании Tab / Shift tab он работает нормально, но теперь я начал тестировать свой код с помощью JAWS, и я вижу, что клавиши со стрелками ведут себя по-разному.

Диалог блокировки похож на логику этой скрипки: https://jsfiddle.net/zw6w5gx2/

Я попытался добавить коды клавиш стрелок в оператор if, но потом заметил, что событие не запускается для этих клавиш.

В моем диалоге есть role = dialog, и при использовании NVDA этого было достаточно, чтобы клавиши со стрелками вернулись к своему нормальному поведению, но он не работает с JAWS.

Я видел, что при использовании role=application все в порядке, но я не хочу использовать эту роль, так как здесь она мне не нужна.

Есть идеи?

Answer 1

Извините, но то, что вы здесь делаете, - это плохая практика и одновременно перекодировка.
Прежде всего, последние версии JAWS имеют встроенную функцию ограничения виртуального курсора текущим диалоговым окном, поэтому нет необходимости повторно реализовывать эту функцию.
Во-вторых, вы не должны никоим образом ограничивать вашего пользователя. Если вы блокируете фокус программно, для пользователя программы чтения с экрана это аналогично воображаемой процедуре, при которой после какого-либо действия вы внезапно отключаете весь монитор, кроме диалогов. Это неприемлемо, поэтому JAWS не дает вам такой возможности.
в-третьих, чтобы добиться своего эффекта с помощью "нажмите Tab - доберитесь до конкретного ввода", вам нужно лишь указать правильное tabindex атрибут, тогда все ваши движения Tab/Shift+Tab будут такими, как ожидалось.
Дело в том, что JAWS на веб-странице работает с вещью, известной как виртуальный курсор. Это позволяет слепому пользователю перемещаться по странице с помощью быстрых клавиш, а именно букв (h перемещается по заголовку, b кнопкой и тд и тп). Вот почему вы видите такое странное (на первый взгляд) поведение.
Однако, если вам абсолютно необходимо сделать все эти вещи, которые вы в настоящее время делаете (и у вас есть право сделать это, несмотря на то, что я говорил ранее), role="application" Ваш лучший друг: таким образом, пользователь определенно будет знать, что его / ее ключи не будут работать так, как он / она ожидает, и это нормально, потому что разработчик сделал это так.

Answer 2

Челюсти ведут себя по-разному при использовании режима "виртуальный курсор" и режима "приложение", попробуйте переключаться между режимами с помощью "insert + z", когда в режиме приложения фокус перемещается к элементам с вкладками, в то время как в "виртуальном курсоре" челюсти используют Структура DOM для фокусировки следующих / предыдущих элементов. То же самое происходит с другими инструментами специальных возможностей, такими как Narrator, когда используется режим "сканирования" "caps lock + space" для включения / выключения.