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

Dojo 的 widget，由于使用 JavaScript 来侦测浏览器是否处于这个高对比度 a11y 模式，而进行不同的输出（针对一般模式，输出背景图片，而针对高对比度的 a11y 模式，使用可代替的文字占位符等代替图片），保留了信息的完整性，从而避免了这些弱视用户的信息获取的不完整。

比方说，Dojo 的“下拉选择输入框“组件,一般情况下，使用一个向下指的箭头图片来进行下拉框选择，而在高对比度 a11y 模式下面，则会选用“▼”这样一个特殊的字符来代替，通过这样的设计，则基本上不会影响用户的操作和组件的功能性。

而利用 Dojo 这一功能，我们只需要在背景图片的节点上放置一个隐藏的区域来提供高对比度的模式下显示的文字下就可以了,并且设置一定的 CSS 就可以支持这种高对比的模式了。举例来说：

某个 widget 的某个背景图片区域的 DOM 节点是这样的：

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

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

.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 的重要性是不言而喻的。