Web 2.0应用的可访问性问题-InfoQ

低代码到底是不是行业毒瘤？一线大厂怎么做的？戳此了解>>> 了解详情 



 写点什么

确认您的网站具有可访问性既是重要的业务也是法律问题。2006 年 Target 被起诉，原因是盲人无法访问他们的网站。在网站使用越来越多的 javaScript 来实现各种特性的动态页面之时，如何保持网站的可访问性这个问题着实不可忽略。

任何一个由大量 javascript 驱动的动态网站在向大众发布使用之前都必须考虑到两个级别的可访问性。第一个级别是对于那些没有激活 javascript 的用户，他们能正常使用您的网站所提供的服务吗？另一个级别是对于那些身体有缺陷的用户，他们在您的网站上所享受的是怎样的用户体验呢？

第一个级别的可访问性可以通过所谓的“逐步加强（progressive enhance）”或着“优雅降级（grace degradation）”来实现。实际上，这两种方式只是从两个不同的视角来看待同一种解决方案。“逐步加强”的观点在于首先确保您的站点在没有 JavaScript 的前提下能够正常提供服务，之后在此基础上再逐渐“人不知鬼不觉地”添加一些互动特性。而“优雅降级”是从相反的视角出发，主张确保在用户没有激活 JavaScript 的情况下，网站能够退回到最基础的服务功能。Christian Heilmann 总结了以“逐步加强”的方式开发的７条准则。这些准则可以概括为：

尽可能地分离功能

在能够正常运作的服务上逐步添加新功能

产生有依赖的标记

在发布之前测试所有功能

对运行环境了如指掌

按需加载新功能

代码模块化

第二级别的可访问性的关键在于为那些身体有缺陷的用户考虑。这可以参考 ARIA 规格说明来解决。这个规格说明包含的内容基本上是指在具有交互性的 html 元素中添加特殊的属性。Google Reader 的开发团队最近在他们的产品中将该规格说明付诸实践。他们根据在实现的过程中所得到的启发与经验创建了一个可以自动注入可访问性的类库，并将它命名为 AxsJAX 。John Resig，jQuery 的创始人也快速地浏览了一下如何使用 ARIA 属性来申明页面的某些部分拥有动态更新的功能。John 提供了下面这段通过 ajax 请求来更新的一段示范代码：

<pre id="hk0m26"> Active Users: A list of the currently-connected users. <ol aria-live="polite" aria-relevant="additions removals" aria-describedby="users-desc" id="users"> <li>John</li> <li>Mary</li> <li>Ted</li> <li>Jane</li> </ol> 

Filament Group 提供更多的关于如何使用 ARIA 规格说明来开发可访问性交互组件的指南。首当其冲的是关于如何使用canvas 标签来可开发可访问的图表，他们以数据表格为基础，在JavaScript 没有激活的情况下，这个表格的显式能够相应地降级。紧接着他详细解释了如何使用JavaScript 创建非常吸引眼球的可访问的slider control 。这篇指南使用了下拉框中的数据来创建slider，这样一来control 在没有JavaScript 的情况下仍然正常工作并且提供类似的功能。这两个控件都自动在html 中添加了适当的aria 属性。另外，Marco Zehe 在他的博客中分两篇博文演示了在网站中实现ARIA 规格是多么容易，并且提供了一些简单的ARIA 小窍门。他的第一篇博文主题是如何使用aria required 表现一个必填域，而第二篇讲到了如何利用aria-labelledby 和aria-describedby 以将表单域中的句子填充完整，比如如何填充“Delete History after X days”中的X。

查看英文原文： Accessibility Remains a Concern with Web 2.0 Applications