默认无障碍：我们在每个页面做的五项检查

无障碍网站适合视力较弱、色盲、行动不便或使用读屏软件的人。它对其他所有人也更好用：在强烈阳光下的人、在拥挤的列车上单手操作的人。以下是我们在上线前对每个页面进行的五项检查。

网站无障碍听起来像一份冗长的技术标准，完整版确实如此。但我们在真实网站上发现的大多数问题都归结为同样的五件事，任何人都可以在一个下午内检查完，不需要特别的工具。

1. 对比度

正文与背景的对比度至少需要 4.5:1，大号文字至少 3:1。白底浅灰字往往不达标，在户外也很难看清。

检查方法：取出文字颜色和背景颜色，输入 WebAIM 对比度检查器。也要检查按钮、表单里的占位文字和照片上的文字：这些最常不合格。

2. 焦点

所有可点击的元素也必须能用键盘操作，获得焦点的元素需要清晰可见的轮廓。为了美观去掉轮廓，会让键盘用户迷失方向。

3. 标题

每页一个主标题，其他标题按顺序排列。读屏用户会在标题之间跳转来浏览页面，就像视力正常的访客用眼睛扫视一样。

4. 替代文本

有意义的图片配上一段简短描述，说明图中内容。装饰性图片的描述留空，让读屏软件跳过。

好的替代文字描述图片中对这个页面重要的内容。产品照片要写产品和颜色；团队照片要写照片里是谁。不要以“图片：”开头：读屏软件已经会说明这是一张图片。

5. 触控区域

按钮和链接需要足够大、彼此间距足够，方便用拇指点按。舒适的触控区域约为 44×44 像素。

无障碍不是附加功能，而是网站本来就应该有的样子。

五项检查之外的网站无障碍

这五项检查能发现最常见的问题。在它们到位之后，还有几项值得加上：

• 表单：每个字段都有可见的标签，而不只是占位文字；错误提示要说明哪里出错、怎么改。
• 链接：链接文字要说明去向。“查看我们的价格”脱离上下文也看得懂；“点击这里”就不行。
• 缩放：文字放大到 200% 时页面仍然可用，内容不会被截掉。
• 动效：动画遵从访客设备上的“减少动态效果”设置，也不要有闪烁。
• 视频：为语音加字幕，这样关掉声音也能看懂视频。

完整的标准是 Web 内容无障碍指南（WCAG）2.2。AA 级是企业网站的常见目标。完成上面五项之后，W3C 的简易检查是不错的下一步。

为什么这对生意有好处

无障碍的网站通常对每个人都更好用，也就意味着更多人能完成他们想做的事。很多无障碍基础和搜索引擎的最佳实践是重合的，比如清楚的标题、描述性的链接和替代文字。而且，这本来就是把东西做好的一部分，就像确保大门能打开一样。

常见问题

印尼法律要求网站无障碍吗？

印尼法律承认残障人士的权利，包括获取信息的权利，不过针对私营网站的具体技术要求不像一些国家那么详细。如果您面向海外销售，请查看那些市场的规定。无论如何，上面的检查都是好的做法。

无障碍插件或浮层能解决所有问题吗？

不能。浮层修不好设计本身缺失的标签、混乱的结构或看不清的颜色。无障碍必须在设计和代码里一开始就做进去。

怎样用读屏软件测试？

每部手机都内置了读屏功能：iPhone 上是 VoiceOver，Android 上是 TalkBack。打开它，闭上眼睛，试着找到您的联系方式。这会让人谦逊，也非常有启发。

网站无障碍是我们在网页设计服务中设计和建造每个网站的一部分。它也与速度和字体相关：参见为什么网站在手机上感觉很慢和为两种语言挑选字体。