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

WCAG 2.0

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

和 Web 可访问性相关的规范，还有 ATAG 和 UAAG:

详见：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，很不乐观。