岁月如歌

用开放的心态,打造专业的人生。

WCAG 2.0 与淘宝首页的可访问性

with 13 comments

WCAG 2.0

WCAG 是 Web 内容可访问性指南(Web Content Accessibility Guidelines)的缩写,其目的是让残障人士也可访问 Web 内容。自 1999 年发布 WCAG 1.0 以来,可访问性在国外很受重视。欧美、香港等地区,甚至被立法保护

和 Web 可访问性相关的规范,还有 ATAG 和 UAAG:
illustration showing the guidelines for the different components, detailed description at http://www.w3.org/WAI/intro/components-desc.html#guide
详见:Essential Components of Web Accessibility.

WCAG 自身也包含一系列文档:The WCAG 2.0 Documents. 其中,2008 年发布的 WCAG 2.0 是最重要的一份,可归纳为四大原则和十二条指南:

对 Web 开发者来说,Techniques for WCAG 2.0 提供了一份具体的操作指南。实际操作时,可配合校验工具来减轻工作量。

淘宝首页的可访问性

校验工具不是很好找,我采用的是 IDI Web Accessibility Checker. 淘宝首页的校验结果如下:

Accessibility Review (Guidelines: WCAG 2.0 (Level AA))

Known Problems(136)
Likely Problems (0)
Potential Problems (2256)

结果不是很好,主要问题有:

  • 图片缺少 alt 属性,以及用作链接的图片的 alt 属性为空。
  • text input 和 textarea 等元素缺少相关联的 label 元素。
  • 部分文字的颜色对比区分度不足。比如下图中的“春天花事”和“一元拍”:
  • b, font, i 的使用。其中 b 和 i 是废物利用,表示 border 和 icon. 目前的使用方式实际上并不会有损可访问性,可忽略。
  • a.href 是 javascript 伪协议。这个很可恶,得严禁出现。
  • html 元素上缺少 lang 属性。以前我觉得这个属性很鸡肋,现在才明白对屏幕阅读器有帮助。

以上是校验工具检查出来的已知问题。除此之外,还有 2256 个潜在问题。有几个值得留意:

  • img 缺少 longdesc 属性。其重要性在 JavaScript 禁用和屏幕阅读器 有提及。
  • 不少图片的对比度不够,包括淘宝网 logo. 很囧。这一点需要视觉同学进一步确定。
  • gif 动画导致的闪屏。按照规范,动画时间不能超过 5 秒。比如导航上的 hot 图,应该最多只跳动 5 秒,5 秒后保持静止。
  • 缺少“skip to content”链接。
  • 表单的必填字段没有显式标明。得在源码里用 required 属性或 “必填” 等文字来说明。

Bonus

Techniques for WCAG 2.0 中,有一条是:

C27: Making the DOM order match the visual order

456bereastreet 有一篇博客阐述:Source order and display order should match. 这意味着圣杯、双飞翼等使用了负边距来定位的布局系统都有损可访问性,可以进历史博物馆了:(

推荐大家采纳淘宝首页的布局方式:用 section, aside, div 等元素来布局。大道至简。

小结

作为 Web 开发者,去熟悉和遵守 WCAG 规范,能让我们的世界更美好。我们总不希望,当我们老至耄耋之年时,想自主上网看个片都不能了。

更新

2011-03-19: 找到一个很好用的在线校验工具 TAW Online. 推荐安装 Firefox 的 TAW3 with a click 扩展。淘宝首页的检测结果: http://goo.gl/kWbeY,很不乐观。

Advertisements

Written by lifesinger

March 18, 2011 at 17:22

Posted in Articles

13 Responses

Subscribe to comments with RSS.

  1. 1、国情来看,WAI还有很长的路要走,需要视觉和前端培养相应的意识。
    2、《Source order and display order should match》是一条设计准则,与布局系统无关。相反,我认为布局系统非但不会过时,反而会更加系统,更加自动化。
    3、至于传说中的屏幕阅读器,很多WAI文档都会提及,但从未亲自测试使用过,不置可否。规范、工具什么的都靠不住,公司应该投钱弄几台来配合测试。据盲人用户反馈,QQmail”基本版”可访问性好。

    catge

    March 18, 2011 at 21:50

  2. 用了读屏软件,你会崩溃的。
    有apple的产品可以试用一下Voiceover。
    也可以下个开源读屏软件 NVDA。

    jace

    March 19, 2011 at 00:20

  3. @jace: 对于 VoiceOver 等读屏软件来说,用什么布局关系都不大,但有些读屏软件,会直接从源码解析文字。用圣杯等布局方式,会使得源码中的 order 和视觉不一致,有可能让盲人用户与正常用户在沟通交流时发生障碍,推荐 YUI3 Grids 和 960.gs 等保持 order 的布局系统。这是 Robust 原则的体现,就如我们在国内,还得尽量兼容 IE7- 一样。

    路还很长,但方向对了,就不怕远,一起努力就好。

    lifesinger

    March 19, 2011 at 08:55

  4. Hi,
    “表单的必填字段没有显式标明。得在源码里用 required 属性或 “必填” 等文字来说明。”
    我是否可以理解为,和以图换字写法类似,源代码里出现必填文字,但是界面里也可不显示?
    不管是不是在界面显示这个提示,都有些不太理解,它的出现会容易让用户一眼明白这个字段是必填的,但除此外还会有其它方面的影响吗? ^_^

    零YY

    March 21, 2011 at 17:06

  5. @零YY:你的理解是对的。无论界面上是否有“必填”标识,在源码里,最好要有相关属性或字段说明。这样能保证屏幕阅读器在分析源码时,识别出必填表单项,残障用户从而能得到更好的提示。

    lifesinger

    March 21, 2011 at 20:31

  6. 纠正一个小错误,b和i通常被表象地认为是bold和italic,一般来说大家会认为是表示样式而不建议使用的,但是HTML5重新定义了b和i,让着两个标签赋予了新的语义,所以在某些情况还是可以使用的,请看http://www.w3.org/International/questions/qa-b-and-i-tags这篇文章所写的比较详细。

    Adam

    March 22, 2011 at 14:39

  7. @Adam: 感谢指正,HTML5 里,b 和 i 有了新的语义。淘宝将 b 作为 border 的缩写,i 作为 icon 的缩写,现在看起来,的确不妥当。

    lifesinger

    March 22, 2011 at 14:46

  8. 这个东西如果想要真正做好的话,或许公司真的要配备这种设备,然后我们闭上眼或者请真正的盲人来体验。
    实验者的感受如何?我们的体会如何?这都会比学书本上的知识强的多。没有实践,这些东西都比较虚,感觉没有底气。
    目前能做的只能照着标准走,但有些细节确实容易忽略或者忘记(因为确实太多了)。
    先抗住,再优化。

    paper

    March 23, 2011 at 17:41

  9. 顶一句: 方向对了,就不怕走远~~

    汗… 我发现老是来这收集名言来了。- –

    潇洒

    March 24, 2011 at 14:21

  10. 大哥你是强大的淫,能给点学JS的建议么??你是我的偶像 |||

    风吟

    March 28, 2011 at 10:38

  11. http://www.w3.org/WAI/ 里有很多可访问性相关的建议

    小豪

    April 1, 2011 at 10:20

  12. 博主一定是做前端的吧。

    上海男科医院

    April 27, 2011 at 15:46


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s