使用 Dojo 开发支持 Accessibility 的 Web 应用（1）

look_w

简介Accessibility，又经常被缩写为 a11y，指的是软件产品的可访问性、易用性，特别是指对于诸如视力低下等残障人士的使用上的无障碍性。Web 应用，越来越多的作为软件产品的发布形式。而且随着互联网应用的飞速发展，Web 程序的易用性（Accessibility）显得尤为突出。
developerWorks Ajax 资源中心
            请访问 ，这里几乎囊括了关于 Ajax 编程模型的所有信息，包括各种文章、教程、论坛、blog、wikis、活动和新闻。

一个好的 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 的应用程序中：

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

当然不使用 CSS 而去使用 JavaScript 定义字体大小是不常见的，但是对于某些对浏览器应用不熟悉的视力有问题的用户来说，我们可以在网页的显眼位置设置增大、缩小文字的按钮，用户通过点击这两个按钮，而不需要掌握浏览器伸缩字体的方式，就能够放大、缩小网页上的字，很显然，这种按钮的背后就是上面使用 Dojo 的例子那样的 JavaScript 在起作用。
而更加人性化，完备的解决方案则是多样式表的提供，比如说专门为视力弱小的人群提供 a11y 形式的 CSS， 用户可以自主的选择这种样式为整个网页换肤，并且，浏览器通过 cookies 记录下来用户的偏好样式，以后每当该用户重新访问该网页的时候，就使用之前用户选择的 a11y 的 CSS 进行呈现，下面是一个使用 Dojo 动态替换样式表的例子:

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

  1	<link id="theme" type="text/css" rel="stylesheet" href="default.css"/>

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

  1 2 3 4 5 6 7 8 9 10

  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);

  
  
  
  

页面导航和键盘支持用户在浏览网页的时候，经常需要与网页进行一系列的交互操作，比如，点击链接，输入表单信息，点击按钮等等。大部分的用户相当依赖于鼠标来进行这些工作，鼠标能够精确定位页面上任意一处地方，并且通过点击左键、中键、右键等来触发相应的操作。但是这些鼠标的操作对于某些残障人士来说是很困难的，他们很大程度上更加依赖于键盘的操作，尤其是 Tab、Enter、方向键等键值。其中最重要的可能是 Tab 键了，Tab 键主要用来进行页面元素的导航。
使用 Tab 键导航用户可以使用 Tab 键（或者 Shift+Tab 键）来定位到页面上的元素，获得该节点的焦点，继而可以使用 Enter 回车键或者 Space 空格键来触发点击事件。这是最为普遍常见的键盘导航的应用。
在一个 HTML 网页中，一般意义上可以获取焦点的元素，也就是能够 Tab 到的元素主要是链接 <a> 标记，表单输入域（<input>, <textarea> 标记等等），按钮等需要用户进行交互的元素。如果网页中不特别规定元素的导航顺序，用户使用 Tab 键，将依次按页面的顺序从左至右，由上而下（某些中东国家使用从右至左的文字顺序）的访问，Shift+Tab 组合键则是倒序的访问。
当然软件开发人员可以设定元素的 TabIndex 属性，来自行规定访问的顺序。比如说 a,b,c 三个元素，tabIndex 依次是2,3,1。 那么使用 Tab 键导航将依次访问到 c, a, b。这些都是普通 Web 程序为了增强 a11y 的常用方法。
而针对 Ajax 形式的 Web 应用程序，由于内容的动态性，访问的次序以及焦点的设置都有可能发生变化。比如说：用户通过点击某个按钮激活了一个利用 JavaScript 技术模拟的模态的对话框 Dialog，那么这个时候用户的页面焦点则应该被设定到这个 Dialog 中，并且用户再使用 Tab 键导航， 则不应该跳出这个模拟的模态 Dialog 的范围。直到 Dialog 被销毁。
而这样的需求，很显然，只是简简单单的使用 HTML 语言规范中的 TabIndex 属性是做不到这一点的。我们必须拦截用户的键盘事件，来判断用户按的键值，并且根据不同的键值做出不一样的响应。
不幸的是，不同的浏览器对于用户按键的捕捉，键值的属性等等都各有差异，很难做到支持各种主流的浏览器，不过 Dojo 针对键盘事件的处理，尤其是在各种键值在浏览器中的属性的不一样，事件机制也有差异的情况下，进行了规范化，屏蔽了浏览器之间的差异性，用户可以在同一个 API 下面进行编程，大大提高了方便程度。
下面是一个简单的利用 Dojo 捕捉键盘事件，处理 Tab 导航的例子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

function onkey(evt){         var key = evt.keyCode;         if(key == dojo.keys.SHIFT_TAB)         {                 dojo.stopEvent();                 // 阻止事件的往上发布                 // 定位到上一个需要定位的元素 prev                 prev.focus();         }         else if(key == dojo.keys. TAB)         {                 dojo.stopEvent();                 // 阻止事件的往上发布                 // 定位到下一个需要定位的元素 next                 next.focus();         } } //利用dojo的事件挂接方法来处理键盘事件,用户按下任意键值，都将出发onKeyPress方法 dojo.connect(document, "onkeydown", "onkey");