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

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

我有一个显示为 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) 还有什么吗?

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

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