使用Dojo开发支持Accessibility的Web应用

使用Dojo开发支持Accessibility的Web应用2011-08-17 IBM 蒋博简介

Accessibility，又经常被缩写为 a11y，指的是软件产品的可访问性、易用性，特别是指对于诸如视力低下等残障人士的使用上的无障碍性。Web 应用，越来越多的作为软件产品的发布形式。而且随着互联网应用的飞速发展，Web 程序的易用性（Accessibility）显得尤为突出。

一个好的Web 应用程序，必然需要支持 accessibility（a11y）。这主要是要考虑到世界各地的具有伤残障碍的残障人士比例都不小，他们不能像正常人一样进行识别、阅读、操作 Web 网页，从而形成不公平的障碍。目前，很多发达国家，比如美国、欧洲、日本等国家都针对 a11y 立法，不符合 a11y的软件程序很多都不在政府机关等的采购范围内。所以说 Web 应用程序对于 a11y的支持是一个基本上不可或缺的功能。

目前越来越多的开发者加入 a11y的阵营，来关注残障人士，为其 Web 程序增加 accessibility的支持。Dojo 作为一个 JavaScript/Ajax 类库，附带了一些含有 a11y 支持的UI 小组件，并且提供了一些简便的方法来帮助开发者更容易便捷的将自己的Web 网页提升一个层次，支持 a11y。

页面样式和字体选择

一般而言，对于残障人士，尤其是视力不好的用户，大的字体，间隔分明的布局体系有利于他们阅读 Web 网页。他们也通常会利用浏览器自带的放大缩小字体的功能来为自己设置最为合适的字体。不同的浏览器放缩字体的方法不尽相同，在 Firefox 浏览器中可以使用“Ctrl +”快捷键来放大字体，“Ctrl - ”快捷键来缩小，而 IE 浏览器则而可以使用菜单上的字体缩放来调整。

字体的使用，应该尽量使用比较规范的印刷体字体，而不要使用一些不常见的手写体形式。字体的大小可以在层叠样式表 CSS 中定义以百分比，或者以 em 等为单位设置字体大小，从而支持动态缩放。这样的字体单位属于相对单位，各种浏览器都能较好的支持。同样，也可以在 JavaScript 中使用 Dojo 为页面上的某些节点动态方便的设置字体大小，这主要用于一些 Ajax的应用程序中：

dojo.query（".big"）.style（"fontSize","150%"）;
// 将页面上所有具有 big 这种 css 类的节点的字体大小设置成 150%;

当然不使用 CSS 而去使用 JavaScript 定义字体大小是不常见的，但是对于某些对浏览器应用不熟悉的视力有问题的用户来说，我们可以在网页的显眼位置设置增大、缩小文字的按钮，用户通过点击这两个按钮，而不需要掌握浏览器伸缩字体的方式，就能够放大、缩小网页上的字，很显然，这种按钮的背后就是上面使用 Dojo的例子那样的JavaScript 在起作用。

而更加人性化，完备的解决方案则是多样式表的提供，比如说专门为视力弱小的人群提供 a11y 形式的CSS，用户可以自主的选择这种样式为整个网页换肤，并且，浏览器通过 cookies 记录下来用户的偏好样式，以后每当该用户重新访问该网页的时候，就使用之前用户选择的a11y的CSS 进行呈现，下面是一个使用 Dojo 动态替换样式表的例子:

在 HTML 文件中指定了默认的CSS 样式文件

用户点击 changeThemeButton 切换到 a11y的CSS, 使用 Dojo 可以很方便的做到：

dojo.require（"dojo.cookie"）;
var changeThemeButton = dojo.byId（"changeThemeButton"）;
function changeTheme（）{
     var styleObj = dojo.byId（"theme"）;
     var src= "a11y.css";
     dojo.attr（styleObj, "href", src）; //设置新的样式
     dojo.cookie（"style", src）; //设置cookies
}
//使用dojo的event connect机制，用户点击changeThemeButton，将触发changeTheme方法
dojo.connect（changeThemeButton, "onclick", changeTheme）;