开发支持屏幕读取软件的 Web 2.0 应用-1 简介

look_w

辅助功能 (Accessibility) 是帮助残疾人更有效地使用计算机的专用程序和设备，它有很多类型，例如适用于低视力人群的屏幕放大器，通过声音命令操作电脑的语音输入工具等等。而其中最重要的类型之一是适用于盲人的屏幕读取软件。屏幕读取软件是专为盲人或视力有障碍的人设计的屏幕朗读软件。用户可以通过功能键和数字键盘的切换，就能够随心所欲地查找和处理文件，对网页进行导航浏览。因此对屏幕读取软件支持的好坏是衡量一个 Web 应用程序提供辅助功能优劣的一个重要标准。现在 Web2.0 技术的应用已经像雨后春笋一样遍布了整个互联网，同时随着 Ajax 和 JavaScript 的广泛应用，越来越多的静态 Web 页面转变为充满交互的 Web2.0 应用。而 Accessibility 的问题也随之而来。比如亚马逊的钻石搜索（Amazon diamond search）就给人们展示了一个使用 Ajax 来创造高级交互接口的伟大案例，它使用了拖拽条来控制筛选标准，然后根据用户选择的标准自动呈现数据给用户，亚马逊的这个应用为很多用户提供了非常棒的用户体验，但是对于那些使用屏幕读取软件的用户来说，它根本不可用。因此，如何开发支持屏幕读取软件的应用是每个 Web2.0 应用开发人员需要面对的一个问题。
为了支持屏幕读取软件，Web2.0 应用开发需要从以下几个方面考虑：支持读取页面信息功能，支持页面导航功能，支持图片识别功能，支持表格识别功能和支持 Forms 表单识别功能。目前 Dojo 向 Web2.0 开发者和设计者提供了一个强大的 JavaScript 工具集用以快速开发健壮的 Ajax 应用。本文将结合 JavaScript 和 Dojo，详细阐述如何开发支持屏幕读取软件的应用。
支持读取页面信息功能屏幕读取软件的基本功能就是读取页面信息。而屏幕读取软件阅读网页的能力主要来自网页中 HTML 元素给出的相应信息，比如链接 a 标记的 href 和 title 属性。屏幕读取软件通过 href 属性来识别链接标记。例如下列 javascript 脚本片断：
清单 1. 含有链接的 javascript 片断 .

1 2 3 4 5

var link = document.createElement("a"); link.innerHTML = “Go Back to RQM Home”; link.title = “Go Back to RQM Home”; link.onclick = dojo.hitch(this, "showHomePage"); link.id = "return-rqm-home-link";

相应的 css 片断：
清单 2. 支持链接的 css 片断 .

1 2 3 4 5 6 7

#return-rqm-home-link {    color: rgb(48, 158, 158) !important;    margin-top: 5px;    margin-left: 10px;    font-size: 8pt; }

程序员动态生成链接标签，并且使用 css 来控制链接的颜色，用 onclick 方法控制链接的行为。但由于没有 href 属性，屏幕读取软件并不能识别 link 是一个链接标记。因此需要为它设置 href 属性，同时不影响链接的行为：
清单 3.为链接添加标识 .

1	link.setAttribute("href", "javascript:{}");