如何使用符合 WCAG AA 的嵌套表格制作表格

【问题标题】：How can you make a table with nested tables WCAG AA compliant如何使用符合 WCAG AA 的嵌套表格制作表格
【发布时间】：2021-11-21 20:08:52
【问题描述】：

客户总是希望有一个具有扩展区域以显示相关数据的嵌套表的 UI 外观表。

我以前用 DIV 标记和样式做过这个，但是表格的单元格中的表格会更容易。

根据我对 WCAG AA 合规性的了解，表格只能用于表格数据，而向单元格甚至控件添加嵌套表格会使屏幕阅读器和其他工具感到困惑。

我的问题很简单，如何使带有嵌套表格或控件的表格可访问？

【问题讨论】：

【解决方案1】：

如果嵌套表是语义的，那么它们是非常好的。我会不使用主从表示例作为您的模板。它很糟糕。代码过于复杂，错误地使用了grid/gridcell而不是table/tablecell，并且屏幕阅读器难以导航到嵌套表格。

如果您使用真正的<table> 及其关联的<tr>、<th scope="row/col">、<td> 和<caption>，那么您可以让其中一个表格单元格（<td>）包含另一个<table> .

屏幕阅读器用户可以使用 T 键导航到表格（如果使用 JAWS 或 NVDA），然后使用 ctrl+alt+箭头 在表格内导航.再次按 T 将导航到嵌套表，用户可以在嵌套表中导航。这一切都很好。

我建议使用<caption>，这样您就可以命名您的表格，并且屏幕阅读器用户将知道表格的用途。

【讨论】：