网页无障碍设计不是「给盲人做的」——2026年实操指南

去年公司被一个视障用户投诉，说我们的注册页面读屏软件根本读不了验证码。法务说这在美国可能违反ADA。我们紧急修了两周——这件事让我第一次认真研究无障碍设计，发现它根本不是"边缘需求"。

根据WHO 2026年数据，全球约16%的人口有某种形式的残障——在中国这是2.2亿人。这还没算"临时性障碍"：你一只手抱着娃想下单、太阳底下看不清屏幕、地铁里听不了音效。无障碍设计覆盖的场景比你想象的大得多。

WCAG 2.2四个原则（说人话版）

可感知：内容必须能被用户感知到。图片要有alt文本，视频要有字幕，颜色不能是唯一的信息传达方式。

可操作：所有功能必须可以通过键盘操作。不能出现"必须鼠标悬停才能看到的菜单"。

可理解：文字可读、操作可预测。表单错误不要只标红框，要文字说明"邮箱格式不正确"。

健壮：内容能被各种用户代理解析，包括读屏软件。

2026年最容易落地的6件事

1. 颜色对比度达标：正文文字对比度至少4.5:1。用Chrome DevTools的CSS Overview面板一键检查全站。我们第一次扫出来100多处不达标，主要是灰色文字太淡。

2. 焦点指示器不能隐藏：很多人写CSS喜欢`outline: none`去掉蓝框——这对键盘用户是灾难。要么保留默认outline，要么自定义一个更明显的。

3. 图片必须有alt文本：装饰性图片用空alt（），信息性图片写清楚内容。一个检测方法：去掉所有图片，看页面还有没有意义。

4. 表单关联label：每个input必须关联label标签。点"密码"两个字就能聚焦到输入框——这不只是无障碍，对所有人都方便。

5. 跳转链接：在页面顶部加一个"跳到主内容"的链接，对于用键盘Tab浏览的用户是基本礼仪。可以用CSS隐藏但focus时显示。

6. ARIA属性不乱加：一个常见误区是给所有东西加aria标签。其实第一条规则是——如果能用原生HTML元素就别用ARIA。按钮用button标签，别用div模拟。

测试工具推荐

axe DevTools（免费浏览器扩展）：一键扫描，给出WCAG违规项和修复建议。我们日常开发CI里集成了axe-core。

WAVE（wave.webaim.org）：在线工具，输入URL直接出无障碍报告，比axe更直观。

屏幕阅读器实测：macOS内置VoiceOver（Cmd+F5），Windows用NVDA（免费）。闭眼用键盘把你的网站走一遍——这是最直接的方式。

无障碍设计不是"多做一件事"，是"把事做对"。一个按钮用button标签比用div加一堆JS更简单、更语义化、访问速度更快——这不就是好代码的标准吗？

标签： 无障碍设计 WCAG 网页设计 可访问性 用户体验