我需要修改一个网站，让使用屏幕阅读器的用户更容易访问它。我遇到的最大问题是我们在表格中显示的数据。说桌子是这样的：
A | B | C
---------
1 | 2 | 3
4 | 5 | 6
您希望它被读作“A1,B2,C3,A4,B5,C6”。相反，我下载的免费阅读器 (Thunder) 会将其读取为“A,B,C,1,2,3,4,5,6”，这对于真正试图理解所提供信息的人来说毫无意义。
是否有任何标记可以使屏幕阅读器“正确”阅读表格？ Web 开发人员应该在这里做什么？
【问题讨论】：
标签： html html-table accessibility screen-readers
我在表格中看到的第一件事是它的标题单元格，然后是与这些标题单元格关联的值。如果我是盲人，我可能还需要先用盲文听/读这些标题单元格的内容。
尽管如此，在一张长表中，我很容易忘记哪一列与什么相关（年龄列是第 3 列还是第 4 列？）所以一种机制可以告诉/提醒我 - 对于任何数据单元格 - 哪个标题单元格与它相关联会很有用。
作为一个有视力的用户，我只需要抬头或离开。如果我是盲人，我会依靠屏幕阅读器来做到这一点：以你的例子，那会让我听到“A，B，C，A1，B2，C3，A4，B5，C6”或“A， B,C,1,2,3,4,5,6”取决于我的偏好（“我是第一次访问这个网站还是我是一个非常了解其页面结构的普通用户和内容并且不想要/需要太多冗长的内容？")
屏幕阅读器
我建议至少使用以下组合之一进行测试：
即使开源 NVDA 是为现代 Web 技术积极开发的，JAWS 仍然是最知名和最常用的屏幕阅读器。但这是一个昂贵的商业软件，许可证不允许您将其用于测试目的，即使“它在需要重新启动/重新启动之前可以工作 40 分钟”，所以不，或者有钱，或者让你的公司购买它。
从未听说过 Thunder，只听说过 Window Eye（除非它在 2013 年更改，它在支持 HTML5 等“现代”功能方面落后很多）和图形环境中用于 GNU/Linux 的 ORCA（有命令行的屏幕阅读器也适用于盲人极客，除了现代浏览器不能在命令行中工作......）
可访问的 HTML 代码
<table>
<caption>Caption always useful</caption>
<thead>
<tr>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
</tr>
</thead>
<!-- if there's a tfoot element, it goes here -->
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
相关 WCAG 2.0 技术在这个简单示例中使用：
最后一个用于简单表格：顶部的单行标题单元格和/或左侧的单列标题单元格。避免使用更复杂的表格，例如在标题或数据单元格和/或标题单元格的许多行/列上使用 colspan 或 rowspan。例如，您可以通过将表格拆分为简单表格来避免这种情况，但这并不容易或您的客户/老板允许，因此如果您必须为这些复杂表格编写标记，首先不要使用 scope 属性，因为它不是更长的整个行/列的标题单元格（某处有 colspan/rowspan-ed 单元格），然后您应该通过 id / headers 机制将标题单元格与其数据单元格相关联。再次相关的 WCAG 2.0 技术是：
这是一项复杂的任务，需要完全控制您的 HTML 代码、时间+预算以及训练有素的内容编写者（如果他们必须将这些单元格关联起来）！坚持使用简单的表格会更好。
【讨论】：