BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Web 2.0应用的可访问性问题

| 作者 Brian Smith 关注 0 他的粉丝 ,译者 沙晓兰 关注 0 他的粉丝 发布于 2008年6月10日. 估计阅读时间: 5 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

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

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

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

  1. 尽可能地分离功能
  2. 在能够正常运作的服务上逐步添加新功能
  3. 产生有依赖的标记
  4. 在发布之前测试所有功能
  5. 对运行环境了如指掌
  6. 按需加载新功能
  7. 代码模块化

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

        <b>Active Users:</b>
<p id="users-desc">A list of the currently-connected users.</p>
<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

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT