开发和测试访问无障碍的Web应用_html/css

Accessibility简称A11Y，指的是软件产品的可访问性，易用性。A11Y 的出发点是让所有的群体所有的人都可以访问 Web 或者软件应用，本文主要关注 Web 应用的可访问性，主要针对访问 Web 应用有障碍的人士，下面针对几类主要人群对 Web 应用提出的挑战以及我们开发时应该解决得问题加以介绍：

视力有障碍的人士，无法像正常人一样用眼睛浏览网页。此时的解决办法就是用读屏软件将网页上的内容转成声音以帮助用户了解屏幕的内容。对于听力和视力均有障碍的人还可以将网页内容转成盲文使其变得可读。由此带来的需要我们开发人员提供的就包括：鼠标变得毫无用处，因此必须提供键盘支持；对于图片必须提供文字的描述信息；方便的链接指导用户到自己需要了解的内容；颜色变得不可识别，因此仅仅靠颜色识别的信息变得不可识别。为使当前网站上越来越多的音频和视频内容被听力有障碍的人士所理解，就需要提供字幕。

如何使得一个 Web 应用变得更加易用，使得残障人士都能无障碍访问呢？首先需要有一个标准，Web 开发者遵循这个标准开发 Web 应用，浏览器可以识别这些为可访问性使用的元素，而辅助科技（Assistive) 可访问发起组织（WAI）是 W3C 的一部分，主要负责可访问标准，准则的制定，而 Web 内容可访问指南（WCAG）是 WAI 制定的一系列文档。目前的版本是 2.0。WAI-ARIA（WAI- 可访问的富客户端应用）则是 WAI 针对 Web2.0 的富客户端应用提出的一个新的指南，定义了一系列的 role（角色）和 property（属性），使得动态的 Web 应用以及 Ajax 的应用能够更加容易得为残障人士无障碍得访问。

常用工具简介

Webking 是 Parasoft 公司开发的一款自动化测试工具，可以使用其进行白盒、黑盒和回归测试。本文主要关注该工具在 A11y 方面所做的检查与测试。Webking 所遵循的是 CI162 所规定的检查列表。Webking 解决得问题就是把不符合 CI162 标准的元素找出来，分析报告包括以下几类，V：违例； SV：严重违例； PV：可能违例； PSV：肯能严重违例。WebKing 支持本地文件的检查测试和创建项 目检查测试网站内容，包括静态、动态和 Ajax 测试。首先需要配置 Webking 的测试标准为 WCAG2.0，如图 1 所示：

图 1. Webking 配置

对于静态页面可以直接拷贝页面源代码进行静态检查，对于静态网站也可创建项目进行扫描，如图 2 所示： 图 2. 创建静态项目

在 startURL 处输入 URL 地址或者对于本地文件指定本地路径进行测试。对于动态网站 Webking 提供了录制功能，在用户操作网站的时候录制然后回放测试。

图 3. 创建动态项目

而对于越来越广泛的 Ajax 应用 Webking 还提供了 Ajax 的功能测试。WebKing 可以检查出任何不符合规范的 HTML 并且提供了详细的修改参考，可以帮助开发人员迅速的定位问题并解决。

JAWS 是 Freedom Scientific 公司的一款读屏软件，现在的版本是 11.0.734. 读屏软件的工作原理是将整个页面的内容存储在一个虚拟的 缓冲区内，用户可以在这个缓冲区内通过键盘浏览并听到相应的内容。浏览的方式可以是一个字符一个字符的，或者是一行一行的。 当用户需要与应用交互的时候则需要切换到另外一个模式，不能再依赖于这个虚拟的缓冲区了，需要跳出这个缓冲区去跟应用交互。JAWS 从 9 开始就已经支持对于普通的 Form 元素自动切换到交互模式了。使用 JAWS 的时候不能使用鼠标，否则会导致虚拟缓冲区出现错误，从而使得读出来的内容很乱。另外的一个正确的测试方式是首先启动 JAWS，然后在打开浏览器，输入对应的 URL，当整个页面加载结束 的时候再开始操作。在加载的过程中，JAWS 会提示页面已经加载的百分比。这样才能保证这个虚拟的缓冲区存储内容的正确性。

开发和测试可访问 Web 应用的步骤

开发和测试可访问的 Web 应用主要的有以下几个步骤：

开发最佳实践

开发一个可访问的 Web 应用不仅需要工具的支持，浏览器的支持，还需要开发人员遵循一定的规范提供对应的元素信息，才能达到最终的目的。下面着重介绍一些开发中的最佳实践。

关于 Image

1. 图片或者动画均需提供 Alt 信息，使得读屏软件可以将图片动画的内容清楚的读出来。如图 4 所示：

图 4.Cat 图片

对应的 HTML 如下：

清单 1. Image 的 HTML

2. 对于某些用于装饰性的图片，则需设置 alt 为空，使得读屏软件可以忽略此元素。如图 5 的用于装饰页头的图片，实际并没有传递有价值的信息。

图 5. 装饰性图片

对应的 HTML 如下：

清单 2. 装饰性 Image 的 HTML

必须设置一个空 alt 属性的目的是为了能通过 Webking 的检查，并且使得读屏软件能够忽略此元素。

3. 对于图表文件，alt 属性的设置则需要简明扼要的表达出图表的信息，并不用把里面的细节都详细得描述出来。例如下面的图 6：alt 信息设置为销售额从 1996 年到 2004 年间持续稳定增长，从 400 万增长到了 1600 万。并不需要把每一年的增长额都详细得描述出来。

图 6. Image 图表

4. 对于放在链接里面的图片，如果已经有文字的说明，alt 也设置为空，这样避免读屏软件重复同样的内容。如下面的 HTML：

清单 3. 无需重复设置 alt 的 Image

 	 +  tundra .dijitMenuExpand { width: 7px; height: 7px; background-image: url('images/spriteArrows.png'); background-position: -14px 0px; } .dijitMenuExpandA11y {display: none; } .dijit_a11y .dijitMenuExpandA11y {display: inline; }

总结

本文介绍了开发测试可访问无障碍的 Web 应用的工具，步骤以及开发中的最佳实践。应用这些最佳实践与小技巧能帮助您在开发中迅速的为您的 Web 应用提供 A11Y 的支持。