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

look_w

使用其他键值进行辅助、快捷的操作如果您使用过 Google Reader，一个在线的 RSS 内容阅读 Web 应用程序，您可能知道使用 "j" 键来打开下一条 RSS 的 Feed 内容，或者使用 "k" 键来打开上一条内容等等。这些键值不同于 Tab 键，Enter 回车键等 HTML 网页中具有某些默认行为的键值，他们是自定义的，换言之，不同的 Web 站点可能有不同的操作规范，但是不管怎么样，他们提供了除鼠标操作之外的另外一个方便快捷的途径，大大提高了 Web 应用程序的易用性。
而对这些键盘操作的支持，同样需要利用 JavaScript 捕获键盘事件，并针对不同的键值进行不同的操作，实际上，跟上面的例子基本上一模一样，我们只需要再加上对其他键值的判断和对应的处理方法就可以基本上实现了。

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

function onkey(evt){         var key = evt.keyCode;         if(key == dojo.keys.SHIFT_TAB)         {                 // navigate to prev item         }         else if(key == dojo.keys.TAB)         {                 // navigate to next item         }         ...         else if(key == 42)         {                 // user pressed "j"                 // do something .         } } dojo.connect(document, "onkeydown", "onKeyPress");

很简单，不是吗，网站的易用性实际上不需要开发者编写很繁琐的代码，每增加一点支持，网站就能更加的平易近人。
读屏软件的支持读屏软件是一种专门为视力低下甚至完全眼盲的人士开发的辅助性软件，它能跟踪当前页面上的焦点，并且通过语音发声的形式告诉用户当前是什么信息。目前较为流行、用户范围较广的软件主要是 JAWS, Windows-Eyes 等。
支持基本的读屏操作 目前，读屏软件阅读网页的能力主要来自网页中 HTML 元素给出的相应信息。比如链接 a 标记的 title 信息，图片的 alt 替代文字说明等等。这就要求我们在 编写易用性网页的时候，需要为这些相关的信息元素加上这些辅助的信息，尽管这些信息在大多数时候看起来好像是毫无用处的，但是正是有了这样的信息，读屏软件才能较为正常的帮助这些弱视的群体辨别当前的内容。
对于 Ajax 形式的 Web 程序，这个可能尤为重要，因为内容可能时时都在发生变化。对于动态生成的内容，我们也不应该为读屏软件的工作设置障碍，主动设置好这些辅助信息是一个好习惯。
支持 ARIA基本的读屏支持是通过读屏软件阅读 HTML 元素给出的 title，label，标准表单元素的选中（checked, unchecked）信息来实现的，而目前富因特网应用越来越多的使用一些自定义的，模拟桌面 GUI 程序的 Web widget 小组件来增强 Web 应用程序的交互，例如 dojo 自带的对话框 Dialog 模态对话框， 以及模拟桌面程序的下拉菜单等等。由于这些带有某种模拟性质的页面节点，读屏软件是不能了解其真正的含义的，读屏软件还是只能去阅读其中的一些诸如 title，label 等信息，很难让弱视的用户获得和普通用户一致的感受。
ARIA 是为了解决类似以上这种问题的标准协议：它的全称是“W3C Web Accessibility Initiative Accessible Rich Internet Applications (WAI-ARIA) Roadmap”，目前应该说还在完善中。并且诸如 IE 这样的浏览器还是不支持的，Firefox 浏览器支持的比较好。它定义了一系列附加的属性（角色 Roles 和状态 State），来支持描述页面上的这类事物。通过为 HTML 的 DOM 节点，比如一个 div 标记设置角色以及状态的信息，然后通过读屏软件的支持，来阅读出当前所访问的是什么东西，并且它处于什么样的状态，从而达到 Accessibility。比如对话框 Dialog，通过设置在 div 上的角色信息，用户能够知道当前访问的是一个对话框，并且能通过设置在 div 上的状态信息，得知这个对话框目前的状态等等。
Dojo 提供的 widget 均已内建 ARIA 的支持。比如说对话框控件， Dialog：在标示 titleBar 的 div 节点上定义了 waiRole = "dialog"; 如果使用 Firefox 以及读屏软件比如 Windows-Eyes 的用户就能明白当前是一个对话框。

1 2 3 4 5 6 7 8 9 10 11 12 13

<div class="dijitDialog">   <div dojoAttachPoint="titleBar" class="dijitDialogTitleBar" tabindex="0"     waiRole="dialog">     <span dojoAttachPoint="titleNode" class="dijitDialogTitle">${title}</span>     <span dojoAttachPoint="closeButtonNode" class="dijitDialogCloseIcon"       dojoAttachEvent="onclick: hide">       <span dojoAttachPoint="closeText" class="closeText">x</span>     </span>   </div>   <div dojoAttachPoint="containerNode" class="dijitDialogPaneContent"></div>   <span dojoAttachPoint="tabEnd" dojoAttachEvent="onfocus:_cycleFocus" tabindex="0">   </span> </div>

这些都是 Dojo 的组件的内建功能，但是如果想利用 Dojo 开发自己的支持 ARIA 的小组件，Dojo 依然提供了帮助。最简单的：

• 您可以使用 dijit.wai.setWaiRole 来为某个 DOM 节点设置角色信息。
• 您也可以使用 dijit.wai.setWaiState 来为某个 DOM 节点设置状态信息。

当然您还需要阅读一下 WAR-ARIA 的规范说明，除此之外您无须担心其他，Dojo 会为您搞定其他，包括 Firefox 高低版本浏览器对 ARIA 支持的差异，名称空间等等。
支持高对比度的显示模式某些弱视的群体，可能是色盲患者，经常需要调整操作系统的颜色设置来达到高对比度的效果。
而在 Web 程序中，由于大量使用了图片元素传达信息，这些用户可能对识别这些图片颜色感到困难，所以也可能选择关闭这些图片的显示，而仅仅依赖于图片的提示说明文字 （比如说图片 <image> 标记的 alt 属性）。但是在 Web 程序中，由于图片之前占据了页面中的某些个位置，禁用这些图片将导致网页信息不完整，用户得不到相关的信息。
Dojo 的 widget，由于使用 JavaScript 来侦测浏览器是否处于这个高对比度 a11y 模式，而进行不同的输出（针对一般模式，输出背景图片，而针对高对比度的 a11y 模式，使用可代替的文字占位符等代替图片），保留了信息的完整性，从而避免了这些弱视用户的信息获取的不完整。
比方说，Dojo 的“下拉选择输入框“组件,一般情况下，使用一个向下指的箭头图片来进行下拉框选择，而在高对比度 a11y 模式下面，则会选用“▼”这样一个特殊的字符来代替，通过这样的设计，则基本上不会影响用户的操作和组件的功能性。
而利用 Dojo 这一功能，我们只需要在背景图片的节点上放置一个隐藏的区域来提供高对比度的模式下显示的文字下就可以了,并且设置一定的 CSS 就可以支持这种高对比的模式了。举例来说：
某个 widget 的某个背景图片区域的 DOM 节点是这样的：

1	<div class="imgNode"><div class="altText">Logo</div></div>

而我们的 CSS 样式表是这样的：

1 2 3

.imgNode{background-image:url(logo.png)} .altText{display:none} .dijit_a11y .altText {display:inline}

那么在正常模式下，imgNode 这个元素将显示背景图片 logo.png，而其中的替代文字 "Logo" 将不会显示，因为它的 display 属性是 none 。但是在高对比度模式下，由于 Dojo 的自动探测功能，Dojo 会在 HTML 网页的根节点标记上自动加上了.dijit_a11y 这样一个 CSS 类。 那么替代文字 "Logo" 将会显示出来，代替之前的图片。不影响用户对信息的理解。
结束语事实上，a11y 还有其他的内容，不过以上提到的文字大小，布局样式，读屏发声，高对比等的支持，可以认为是一个支持 a11y 的 Web 程序的主要部分。虽然大多数 人是不需要这样的信息的，但是为了让我们的用户能更加广泛、多元化，更公平的参与网络给我们带来的信息世界，a11y 的重要性是不言而喻的。