Как зафиксировать событие нажатия клавиши с помощью ячейки таблицы - веб-доступность?

У меня есть веб-приложение для включения специальных возможностей

В таблице в ячейке есть данные, которые читает программа чтения с экрана JAWS. В тех же ячейках у меня есть меню, которое активируется при нажатии клавиши ввода. У меня нет определенной роли в ячейке. Его следующим образом:

Проблема 1. Нажатие клавиши Enter преобразовано в событие щелчка мыши. Jaws делает это, так как без Jaws ON он работает нормально. Итак, как заставить работать ключ ввода здесь. У меня есть 2 разных меню, которые открываются щелчком мыши и нажимаются клавиши ввода.

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

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){



     $( "td" ).click(function() {
     alert( "Handler for .click() called." );
    });

    $("td").keydown(function(e){
        if(e.which == 13) {
        alert('You pressed enter!');
      }

    });



});
</script>
</head>
<body>

<table> 
  <tbody>
  <tr>
    <th>Parameter</th>
    <th>Description</th>
  </tr>  
  <tr>
    <td tabindex="0" >function</td>
    <td>Specifies </td>
  </tr>
  <tr>
    <td>function2</td>
    <td>Optional.</td>
  </tr>
  </tbody>
  </table>

</body>
</html>

исходная таблица

После щелчка мышью


accessibility jaws-screen-reader
person user0011    schedule 09.02.2017    source источник
comment
У меня есть несколько вопросов, чтобы убедиться, что я понимаю, что вы делаете и чего хотите. Как зрячий пользователь мыши взаимодействует с вашим столом? Они нажимают на ячейку и получают меню? Есть ли визуальная индикация того, что при нажатии на ячейку что-то всплывает? Является ли таблица «стандартной» таблицей данных, в которой есть заголовки столбцов и, возможно, строк, а остальное - это данные? При нажатии на ячейку появляется меню или ячейка переходит в режим редактирования?   -  person slugolicious    schedule 09.02.2017
comment
1. Зрячий пользователь взаимодействует с мышью. 2. Да, они нажимают на ячейку и попадают в меню. 3. Отсутствует визуальная индикация того, что пользователь знает об этом. 4. table - это стандартная таблица данных, в которой есть строки, заголовок строки и столбцы. 5. Нет редактирования на читаемой ячейке.   -  person user0011    schedule 09.02.2017
comment
@ user0011 Зрячий пользователь взаимодействует с мышью. Они могут взаимодействовать с клавиатурой, устройством слежения за глазами, сенсорным экраном, голосом, ногами, поджатием щеки. Если вы действительно хотите сделать его доступным, обязательно обработайте все эти устройства. Забудьте об элементе font, outline: none css. Не преобразовывайте div в кнопку, если вы можете использовать элемент button.   -  person Adam    schedule 09.02.2017
comment
Можете ли вы создать пример jsFiddle или какой-нибудь другой онлайн-манеж для тестирования, который мы можем попробовать? Если нет, то как насчет скриншотов исходной таблицы и того, как она выглядит при щелчке мышью. Я рад, что вы спрашиваете о доступности, и здесь есть отличное сообщество, обладающее обширными знаниями в этой области, но мы можем помочь только с учетом ограниченной информации. Я подозреваю, что мои коллеги-специалисты по специальным возможностям думают, что с этим приложением больше проблем, чем ваш первоначальный вопрос.   -  person slugolicious    schedule 10.02.2017
comment
когда ввод нажата в ячейке, он должен открывать другое меню, чем щелчок (это меню больше подходит для слепых пользователей). выбор меню такой же, как у прикрепленного изображения   -  person user0011    schedule 13.02.2017
comment
@slugolicious, добавил пример кода   -  person user0011    schedule 14.02.2017

Ответы (1)


arrow_upward
0
arrow_downward

У меня аналогичная проблема, когда JAWS преобразует событие keypress, созданное в ячейке таблицы (TD), в событие click, созданное для тега привязки в этой ячейке таблицы. Обработчик событий keypress в ячейке таблицы никогда не запускается, и вместо этого выполняется переход по внутренней ссылке.

Решение, которое я нашел, - добавить aria-hidden к тегу привязки, когда ячейка таблицы выбрана, а затем удалить его, когда ячейка таблицы больше не выбрана. Чтобы сохранить функциональность чтения с экрана, мне также нужно скопировать атрибут aria-label тега привязки до ячейки таблицы, когда ячейка таблицы выбрана, а затем переместить его обратно в тег привязки, когда ячейка больше не выбрана.

Это ужасно взломано, но, к сожалению, JAWS тоже. Надеюсь, у вас сработает что-то подобное!

person Yaron    schedule 01.08.2018