如何用WCAG列出的对象正确处理表格的行正确处理表

Question

我有一个显示为表和javaScript代码的书籍列表，该书籍在行上处理亮点。当我单击一些行时，我可以通过DoubleClick选择它，或者输入它将使用该书籍详细信息打开新标签。

我想知道如何通过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(其他吗？

Answer 1

您应该遵循" Wai-Aria创作实践1.1"中定义的网格模式。网格是可以与之互动的表。

还要在代码样本中注意，每行数据都应具有<th scope="row">。当屏幕阅读器用户垂直导航列以下时，这将有所帮助。决定哪个单元作为行标题最有意义。我的首选是书名。