Html 带有子标题/类别分隔的可访问表格

编辑：对将此标记为与ADA无关的人。这个问题与ADA有关。我有大量的网站，其表格的格式与我试图弄清楚如何让使用屏幕阅读器的人理解这些表格的格式相同。

您好，我正在试图找出一种方法，制作一个表，其中包含子标题/分隔行，以便在屏幕阅读器读取时宣布正确的标题

第一个表按我所希望的那样工作，宣布行组的TH，然后是列标题。然而，第二张桌子并没有像我希望的那样宣布。例如，Jill宣布“Field Techs，Name，Jill”，而不是我预期的“Office，Name，Jill”

我试过scope=“col”和scope=“colgroup”，但都没用。这可能吗？还是仅仅是一张结构糟糕的桌子

感谢您的阅读以及您可能提供的任何帮助/建议

table thead，table th{background:#d3d3；}
表{页边距底部：40px；}

名称
位置
办公室
吉尔
办公室经理
罗伯特
项目经理
现场技术人员
杰森
技术人员
迈克
技术人员
名称
位置
办公室
吉尔
办公室经理
罗伯特
项目经理
现场技术人员
杰森
技术人员
迈克
技术人员

表

只能有零个或一个

AD

元素

允许的内容：一个可选的caption元素，后跟零个或多个colgroup元素，后跟一个可选的thead元素

通过使用多个

thead

元素，浏览器和屏幕阅读器只考虑最后一个元素。您可以使用ARIA属性和角色来处理多个分开的标题行（例如使用

ARIA labelledby

属性来指定标题）

WCAG的一个例子：

---

您在一个表中同时使用scope方法和header/id方法，这将产生问题。另外，正如其他人指出的，您正在使用多个

和

元素，这也不好

我在这里准备了一些代码示例，介绍了如何使用scope方法和header/id方法正确地编码此表：

值得注意的是，

和

不是可访问性相关的元素，即使它们看起来是。这些基本上只在打印时使用。它让打印机知道，如果表格需要分页，可以在下一页重复页眉行

---

另外——不要为此目的使用ARIA；这只会制造更多的问题。本机HTML语义完全能够传达此数据的结构。

您可以发布一些图像来解释所需的结果吗？显示正确，现在是屏幕阅读器宣布正确的标题。吉尔有headers=“office\u group name\u col”，但它却在宣布headers=“field\u group name\u col”当前结果：“field tech，name，Jill”期望结果“office，name，Jill”顺便说一句，我目前正在MacOS上使用Voiceover，我不确定这在其他OS/屏幕阅读器上会产生什么结果。我开始认为这是不可能的，因为它不是一个合适的数据表结构。我这样想对吗？若要查看此视图，是否应将它们拆分为单独的表格？谢谢您向我指出这一点。但是，如果我没有添加多个thead元素，而是像第一个示例中那样在tbody中包含th，那又如何呢？最好的兼容方法是使用ARIA。我添加了一个指向ARIA9文档的链接