Активизировать весь веб-сайт можно кликабельно, используя Enter для доступности (как это делают NVDA / JAWS) - PullRequest
Новая
       28

Активизировать весь веб-сайт можно кликабельно, используя Enter для доступности (как это делают NVDA / JAWS)

0 голосов
/ 24 ноября 2018

Чтобы убедиться, что все элементы активируются при нажатии клавиши Enter, я использую следующий метод: 

document.addEventListener('keydown', function(e){
    if( e.keyCode === 13 ) {
        e.target.click();
    }
});

И для большинства кликов это работает очень хорошо.Проблема заключается в элементах, которые не имеют события click, связанного напрямую, но кликабельны при всплытии.Например: 

    jQuery(document).on('click', function(e){
        jQuery(e.target).addClass('active');
    });

Кликабельные элементы, которые связаны таким образом, не будут запущены в первом примере.Я обнаружил, что NVDA каким-то образом буквально делает все элементы кликабельными с помощью клавиатуры, независимо от того, какой метод используется для их привязки.Если NVDA включен, элементы, которые связаны так же, как в примере № 2, будут запущены.

Я хотел бы понять, как NVDA делает это (или, если у вас есть другая идея, чтобы приблизиться к этому), чтобы я мог скопировать это поведение в свое приложение, которое используется людьми с нарушениями моторики и должно использоватьклавиатура исключительно, без экранных ридеров.

Решение должно быть чисто JS или jQuery.

1 Ответ

0 голосов
/ 24 ноября 2018

Действительно здорово, что вы заинтересованы в том, чтобы сделать ваш сайт доступным, это очень ценится.
Но, пожалуйста, не делайте таких вещей, они приводят к непредсказуемому поведению программы чтения с экрана и часто нарушают само дерево доступа..
Вместо того, чтобы сделать все элементы кликабельными, просто подумайте, какого результата вам нужно достичь.Если вы хотите, чтобы ваши ссылки и кнопки могли использоваться с программой чтения с экрана, вам ничего не нужно делать, это уже реализовано в HTML - бум, нет Javascript, нет jQuery, чистый HTML.
Если по какой-то причине вы хотите, чтобы ваш div s действуют как кнопки, а span s действуют как ссылки, просто используйте роли ARIA: 

<div id="myDiv" role="button">Click me!</div>
I'm a link to <span id="linkToGoogle" role="link">Google</span>, isn't that nice?

Опять - бум, нет Javascript, нет jQuery, чистый HTML.
Однако, если вы можете итам, где вы можете, просто используйте семантические элементы HTML, а не роли ARIA: <button> для кнопок, <a href...> для ссылок и так далее.Я мог бы рассказать подробнее, если бы знал, что конкретно вы хотите сделать кликабельным.

...