无障碍网站，指的是所有人都能使用的网站，包括视力、听力、行动或认知方面有障碍的人，也包括在强烈阳光下看手机、网速很慢，或者只用键盘不用鼠标的人。无障碍常常被当作一张技术检查清单，但它的本质其实就是好的设计：清晰、易读、好用。

这也符合商业利益。无障碍的网站能触达更多潜在客户，往往对所有人都更好用，也更容易被搜索引擎理解。在很多地方，对于某些类型的机构来说，网站无障碍也是一项法律要求。

最常见的使用障碍

大多数无障碍问题，都来自少数几类反复出现的情况。

颜色对比度太低

白底上的浅灰色文字，或者深色背景上的深色文字，对很多人来说都很难看清。文字和背景之间要有足够的对比度，才能让人舒适地阅读。

图片没有替代文字

读屏软件会通过图片的替代文字（alt 文本）来朗读图片。没有替代文字，看不见图片的人就会错过它要表达的意思。纯装饰性的图片则应该标记出来，让读屏软件跳过。

链接和按钮没说清楚要做什么

一个页面上重复出现的「点击这里」「了解更多」，对使用读屏软件的人来说毫无信息量。链接文字单独拿出来也应该能看懂，比如「阅读项目案例」。

只能用鼠标操作的内容

有些菜单、轮播图和弹窗只能用鼠标操作。所有可交互的元素都应该能用键盘操作，并且有清晰可见的焦点提示，让人知道自己当前在哪里。

表单缺少清晰的标签

一开始输入就消失的提示文字（placeholder）不能代替标签。每个输入框都需要一个可见的标签，出错提示也要说清楚哪里错了、该怎么改。

页面结构不清晰

标题层级应该按逻辑顺序排列，因为很多人是靠在各级标题之间跳转来浏览页面的。仅靠视觉样式并不能形成真正的页面结构。

视频和音频没有字幕

视频需要字幕，音频内容最好附上文字稿。

文字无法放大

用户放大文字时，页面布局不应该错乱，内容也不应该被截断。

如何检查你的网站

  1. 先做一次自动检测。 PageSpeed Insights 会给出无障碍评分，并列出具体问题。自动化工具只能发现一部分问题，但它是一个很好的起点。
  2. 只用键盘试一试。 把鼠标放到一边，用 Tab 键逐个浏览页面。所有内容都能到达、都能操作吗？能看出当前焦点在哪里吗？
  3. 放大到 200%。 所有内容还能正常显示和使用吗？
  4. 试试读屏软件。 Mac 和 iPhone 自带 VoiceOver，Android 自带 TalkBack。哪怕只体验几分钟，也会很有收获。
  5. 请真实用户反馈。 依赖辅助技术的用户给出的反馈，是最有价值的测试。

可以马上动手的改进

  • 修正对比度不足的文字，尤其是按钮和小字号文字。
  • 为重要图片添加有意义的替代文字。
  • 把含糊的链接文字换成描述清楚的说法。
  • 确保所有可交互元素都能用键盘操作，并显示清晰的焦点框。
  • 为所有表单输入框加上可见的标签。
  • 检查关键页面的标题层级是否按逻辑顺序排列。

把无障碍纳入日常流程

从一开始就把无障碍考虑进去，比最后再补救容易得多。把它纳入设计评审，新页面上线前先测试，每次网站有较大改动时再整体检查一遍。

总结

无障碍的网站，对每个人来说都是更好的网站。大部分改进都不复杂，而且很多改进还能让网站更清晰、更快，也更容易被找到。

如果你希望请人审查一下官网的无障碍情况，或者想从一开始就打造一个兼顾无障碍的新网站，我们很乐意帮忙。