Question

我有一个显示为表格的书籍列表和处理行中突出显示内容的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）还有什么？

Answer 1

您应遵循“ WAI-ARIA创作惯例1.1”中定义的grid pattern。网格是可以与之交互的表。

还要注意在代码示例中，每行数据应该有一个<th scope="row">。当屏幕阅读器用户垂直向下浏览列时，这将有所帮助。由您决定哪个单元格最适合作为行标题。我的首选是书名。

如何通过WCAG正确处理带有行的表，这些行用作列表打开列出的对象

1 个答案: