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

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

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

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

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

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

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

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

1 ответ

Это действительно здорово, что вы заинтересованы в том, чтобы сделать ваш сайт доступным, это очень ценится.
Но, пожалуйста, не делайте таких вещей, они приводят к непредсказуемому поведению программы чтения с экрана и часто нарушают само дерево доступа.
Вместо того чтобы делать все элементы кликабельными, просто подумайте, какого результата вам нужно достичь. Если вы хотите, чтобы ваши ссылки и кнопки могли использоваться с программой чтения с экрана, вам ничего не нужно делать, это уже реализовано в HTML - бум, нет Javascript, нет jQuery, чистый HTML.
Если по какой-то причине вы хотите, чтобы ваш divдействуют как кнопки и spanдействуют как ссылки, просто используйте роли 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...> для ссылок и так далее. Я мог бы рассказать подробнее, если бы знал, что конкретно вы хотите сделать кликабельным.

Другие вопросы по тегам