VoiceOver не может сфокусировать ввод (или кнопку) при навигации по строке внутри таблицы - PullRequest
0 голосов
/ 24 января 2019

Воспроизведение ошибки: https://codepen.io/rybadour/pen/xMwXyv

<table>
  <thead>
    <tr>
      <th><input type="checkbox" aria-label="header checkbox" /></th>
      <th>Header 1</th>
      <th>Header 2</th>
      <th><button>All Action</button></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div><input type="checkbox" aria-label="row checkbox"/></div></td>
      <td>foobar</td>
      <td>foobar</td>
      <td><div><button>Action</button></div></td>
  </tr>
  </tbody>
</table>

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

Похоже, что если фокусируемый элемент вложен в другой элемент, VoiceOver не сможет правильно сфокусировать его, даже если этот элемент читается правильно.

Кто-нибудь знает, как я могу решить эту проблему, не удаляя окружающий элемент div?

Спасибо.

1 Ответ

0 голосов
/ 25 января 2019

флажок в

не будет сфокусирован

Вы можете уточнить? В вашей таблице есть два флажка, и оба они содержатся в

. Один находится в , а другой - в . Я предполагаю, что вы говорите о последнем, так как вы говорите о переходе от заголовка, но я хотел быть ясным.

Ваш пример кода ручки работает нормально с VoiceOver на iOS. У вас проблемы с VoiceOver на Mac? Он также работает нормально с NVDA на Firefox.

Несмотря на то, что это, вероятно, упрощенный пример, обратите внимание, что если мой читатель экрана фокусируется на 2-й строке и на 2-м столбце (ячейка "foobar"), и я использую ctrl + alt + влево для перемещения в первую ячейку, сначала будет прочитан заголовок столбца, который является «заголовком флажка», а затем будет прочитано содержимое ячейки, которое является «строкой флажка», поэтому пользователь программы чтения с экрана услышит « заголовок, флажок строки ».

флажок в

не будет сфокусирован ... [но] VoiceOver ... визуально показывает, что выбран

Еще одно уточнение. Когда вы говорите, флажок «не будет сфокусирован», вы говорите о фокусе клавиатуры, например, обводке, которая обычно рисуется вокруг активного элемента, когда вы вкладываете на него? И затем, когда вы говорите, что VO визуально показывает, что он выбран, вы подразумеваете «фокус» VoiceOver, обычно толстый черный контур?

Как это звучит, когда вы нажимаете чекбоксы?

...