电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 开发支持屏幕读取软件的 Web 2.0 应用-4 支持表格识别功能 [打印本页]

作者: look_w 时间: 2018-8-23 20:32 标题: 开发支持屏幕读取软件的 Web 2.0 应用-4 支持表格识别功能

支持表格识别功能Web 应用通过表格表示一组数据之间的关系。当用户遇到一个表格时，他必须可以理解表格的用处，并且能获取表格中的所有的元素信息。这对于视力正常的用户来说是非常容易的，但是那些需要借助屏幕读取软件获取信息的用户却很容易在大量的数据面前丢失方向。这就需要在 html 中提供适当的 markup，使得屏幕读取软件能够很好的识别表格中的数据以及其所表达的相应信息。
例如下图中的表格，我们通过以下四步使得屏幕读取软件能很好的识别其中的信息。
图 5. Web 应用中的表格

通过 <th> 标记指示行 / 列表头：创建易于访问的数据表格的第一步就是指明行 / 列表头。开发人员可以通过定义 <th> 标记明确的指示行 / 列表头。
将数据单元与适当的表头关联起来：有两种方式将数据单元和其相应的表头关联起来：
- scope 属性 : scope 属性作用于标头元素中，值为 row 或者 col，分别表示该元素是行头或者列头。
- headers 和 id 属性 : id 属性作用于表头元素，headers 属性作用于数据单元，与其相应的标头元素的 id 对应。它们的作用与 scope 相同，用以区分表头和数据。值得注意的是，这两个属性使用起来比较复杂，因此通常用于复杂表格，即表格中的一个数据单元与两个以上的表头相关联。
设置 table 元素的 summary 属性：summary 为用户提供表格的描述信息，屏幕读取软件可以读出 summary，同时 summary 的值是不可见的，因此不会对页面产生影响。例如，上图表格中列出当前所需的 Requirements，视力正常的用户可以通过阅读左上方的标题和表格上方的说明来了解表格的作用。而屏幕读取软件则可以根据 summary 属性，帮助用户直接了解表格中所含信息的结构或目的。
避免使用多于二层行 / 列表头的表格：一些屏幕读取软件不能识别多层行 /列表头的表格，因此 Web应用的开发人员要尽量使用简单的，一维或者二维表格。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)