Question

我需要修改一个网站，以便屏幕阅读器用户更容易访问它。我遇到的最大问题是我们在表格中显示的数据。说桌子是这样的：

A | B | C
---------
1 | 2 | 3
4 | 5 | 6

您希望将其读作“A1，B2，C3，A4，B5，C6”。相反，我下载的免费阅读器（迅雷）会将其读作“A，B，C，1,2,3,4,5,6”，这对于真正试图理解所呈现信息的人来说毫无意义。

是否有任何标记可以使屏幕阅读器“正确”读取表格？ Web开发人员应该在这做什么？

Answer 1

我在表中看到的第一件事是它的标题单元格，然后才是与这些标题单元格相关联的值。如果我失明了，我可能还需要先用盲文听到/读取这些标题单元格的内容。
不过，在一个长表中，我可以轻易地忘记哪个列与什么相关（Age列是第3个还是第4个？）所以这个机制可以告诉/提醒我 - 对于任何数据单元 - 哪个标题单元格与它相关联将是有用的作为一个有视力的用户，我只需要向上或向左看。如果我是盲人，我依靠屏幕阅读器来做到这一点：用你的例子，我可以听到＆＃34; A，B，C，A1，B2，C3，A4，B5 ，C6＆＃34;或＆＃34; A，B，C，1,2,3,4,5,6和＃34;取决于我的喜好（＆＃34; 这是我第一次访问这个网站，还是我是一个普通用户，非常清楚它的页面和内容是如何构建的，并且不需要/需要太多详细信息？＆＃34）

屏幕阅读器
我建议使用以下至少一种组合进行测试：

Windows / Firefox / NVDA
OS X或iOS / VoiceOVer（已安装）

即使开源NVDA是为现代网络技术积极开发的，JAWS仍然是最知名和最常用的scren阅读器。但这是一个昂贵的商业软件，许可证不允许您将其用于测试目的，即使它在需要重新启动/重启之前的40分钟内也可以使用它。如此不礼貌或富裕或让你的公司购买它。

从未听说过雷霆，只有Window Eye（除非它在2013年发生了变化，因为它支持＆＃34;现代＆＃34;像HTML5这样的功能）和ORCA for GNU / Linux图形环境（除了现代浏览器不能在命令行中工作外，还有一些适用于盲人极客的命令行屏幕阅读器）。

可访问的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单元格），然后您应该通过{{{}将数据单元与标题单元格相关联。 1}} / id机制。相关的WCAG 2.0技术也是：

H43: Using id and headers attributes to associate data cells with header cells in data tables

这是一项复杂的任务，需要完美控制您的HTML代码，时间+预算和训练有素的内容编写者，如果他们必须将这些单元格关联起来！坚持使用简单的表格会更好。

使数据表可供屏幕阅读器访问

1 个答案: