Как правильно обрабатывать таблицу со строками, которая служит WCAG для открытия списка в списке объектов - PullRequest
Новая
       38

Как правильно обрабатывать таблицу со строками, которая служит WCAG для открытия списка в списке объектов

0 голосов
/ 24 июня 2019

У меня есть список книг, отображаемых в виде таблицы и кода javascript, который обрабатывает подсветку своих строк.Когда я щелкаю по какой-либо строке, я могу выбрать ее, дважды щелкнув или введя ее, чтобы открыть новую вкладку с данными этой книги.

Мне интересно, как она будет правильно кодироваться в соответствии со стандартами WCAG?Чтобы быть пригодными для чтения с экрана, например, NVDA?

Я посмотрел стандарты WCAG, но не могу найти этот тип использования. 

<table>
<tr>
   <th>Author</th>
   <th>Name</th>
   <th>ISBN</th>
   <th>Year</th>
   <th>Number of Pages</th>
</tr>
<tr>
   <td>John</td>
   <td>How to be awesome</td>
   <td>456987</td>
   <td>1950</td>
   <td>1</td>
</tr>
<tr>
   <td>James</td>
   <td>Two is Two too</td>
   <td>654654</td>
   <td>2010</td>
   <td>520</td>
</tr>
</table>

Сейчас раскрытие деталей и фокусировка строкобрабатывается JavaScript, пользователь может перемещаться по строкам с помощью стрелок вверх / вниз и открывать детали с помощью Enter.

Должен ли я:

1) добавить tabIndex в?

2) добавитьэлемент в строку?

3) вообще не изменять таблицу и пытаться редактировать JS, чтобы она также могла использоваться программой чтения с экрана?

4) добавить элемент в строку?

5) что-нибудь еще?

1 Ответ

1 голос
/ 26 июня 2019

Вы должны следовать сетке , как это определено в "WAI-ARIA Authoring Practices 1.1".Сетка - это таблица, с которой вы можете взаимодействовать.

Также обратите внимание, что в вашем примере кода у вас должно быть <th scope="row"> для каждой строки данных.Это поможет, когда пользователь программы чтения с экрана перемещается вертикально вниз по столбцу.Вам решать, какая ячейка наиболее подходит в качестве заголовка строки.Моим первым выбором будет название книги.

...