如何正确处理 table 行作为 WCAG 的列表打开列出的对象

Question

我有一个显示为 table 和 javascript 代码的书籍列表，用于处理其行上的突出显示。当我单击某行时，我可以 select 它，通过双击或输入它将打开包含该书详细信息的新选项卡。

我想知道 WCAG 标准如何正确编码它？可供屏幕 readers 使用，例如英伟达？

我查看了 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 处理，用户可以使用箭头 up/down 在行中移动并按 Enter 打开详细信息。

我应该：

1) 将 tabIndex 添加到 ?

2) 向行添加元素？

3) 完全不要修改 table 并尝试编辑 JS，以便屏幕 reader 也可以使用它？

4) 向行添加元素？

5) 还有什么吗？

Answer 1

您应该遵循 "WAI-ARIA Authoring Practices 1.1" 中定义的 grid pattern。网格是您可以与之交互的 table。

另请注意，在您的代码示例中，每行数据都应该有一个 <th scope="row">。当屏幕 reader 用户垂直向下导航列时，这将有所帮助。由您决定哪个单元格作为一行最有意义 header。我的第一选择是书名。

如何正确处理 table 行作为 WCAG 的列表打开列出的对象

How to correctly handle table with rows which serves as list opening listed objects by WCAG

html

html-table

list

wcag

screen-readers