您如何使 table 嵌套 tables WCAG AA 兼容
How can you make a table with nested tables WCAG AA compliant
客户总是想要一个 UI 看起来 table 的扩展区域来显示嵌套的 table 相关数据。
我之前使用 DIV 标签和样式完成过此操作，但 table 单元格中的 table 会更容易。
根据我对 WCAG AA 合规性的了解，tables 应该只用于表格数据并且将嵌套的 table 添加到单元格甚至控件会使屏幕阅读器和其他人感到困惑到工具。
我的问题很简单，如何使带有嵌套 table 或控件的 table 可访问？
例如 - DevExpress Master-Detail View 声称可以访问。
https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/MasterDetailView/Angular/Light/
嵌套的 table 如果它们是语义化的，则非常好。我会 而不是 使用主从 table 示例作为模板。真是糟透了。代码过于复杂，错误地使用 grid/gridcell 而不是 table/tablecell，并且屏幕 reader 难以导航到嵌套的 table.
如果您使用真实的 <table> 及其关联的 <tr>、<th scope="row/col">、<td> 和 <caption>，那么您可以使用其中一个table 个单元格 (<td>) 包含另一个 <table>.
屏幕 reader 用户可以使用 T 键导航到 table（如果使用 JAWS 或 NVDA），然后 ctrl+alt+箭头 在 table 中导航。再次按 T 将导航到嵌套的 table，并且用户可以在嵌套的 table 中导航。一切都很好。
我建议使用 <caption>，这样你就可以命名你的 table 屏幕 reader 用户会知道 table 的用途。
客户总是想要一个 UI 看起来 table 的扩展区域来显示嵌套的 table 相关数据。
我之前使用 DIV 标签和样式完成过此操作，但 table 单元格中的 table 会更容易。
根据我对 WCAG AA 合规性的了解，tables 应该只用于表格数据并且将嵌套的 table 添加到单元格甚至控件会使屏幕阅读器和其他人感到困惑到工具。
我的问题很简单，如何使带有嵌套 table 或控件的 table 可访问？
例如 - DevExpress Master-Detail View 声称可以访问。 https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/MasterDetailView/Angular/Light/
嵌套的 table 如果它们是语义化的，则非常好。我会 而不是 使用主从 table 示例作为模板。真是糟透了。代码过于复杂，错误地使用 grid/gridcell 而不是 table/tablecell，并且屏幕 reader 难以导航到嵌套的 table.
如果您使用真实的 <table> 及其关联的 <tr>、<th scope="row/col">、<td> 和 <caption>，那么您可以使用其中一个table 个单元格 (<td>) 包含另一个 <table>.
屏幕 reader 用户可以使用 T 键导航到 table（如果使用 JAWS 或 NVDA），然后 ctrl+alt+箭头 在 table 中导航。再次按 T 将导航到嵌套的 table，并且用户可以在嵌套的 table 中导航。一切都很好。
我建议使用 <caption>，这样你就可以命名你的 table 屏幕 reader 用户会知道 table 的用途。