你的网站可能正在拒绝15%的用户——网页无障碍设计入门指南

去年给一个政府项目做站的时候被要求过WCAG 2.1 AA级检测，当时觉得是走过场。直到后来看了一段色盲用户录屏——一个红色的「提交」按钮在他屏幕上跟灰色背景完全融在一起，他找了三十秒才点到。从那之后我做站都会过一遍无障碍检查。

15%这个数字从哪来

世界卫生组织2023年的数据：全球约有13亿人存在某种形式的残障，占人口16%。放到网站上，这意味着每6个访问者中就有1个可能遇到使用障碍。不只是盲人——色觉障碍（男性中约8%）、低视力、运动障碍（没法用鼠标）、认知障碍，都算。

2025年6月，欧盟《欧洲无障碍法案》（EAA）正式生效，要求所有面向欧盟消费者的数字产品和服务满足WCAG 2.1 AA标准。2026年已经开始有企业因为网站不合规被投诉。中国市场虽然还没强制，但我估计3年内会有跟进。

四个马上能改的点

1. 颜色对比度。这是最容易被忽略但影响最大的。WCAG AA要求正文文字与背景的对比度至少4.5:1。一个典型的错误：灰色文字（#999）在白色背景上，对比度只有2.85:1，低视力用户根本看不清。用Chrome DevTools的CSS Overview面板可以直接测，或者用WebAIM的在线对比度检查器。

我自己用的一套安全色：正文用 #333，辅助文字用 #666，链接用 #1a73e8，都能过4.5:1。

2. 键盘可操作。所有功能必须能用Tab键导航、Enter键激活。测起来很简单：打开你的网页，只用键盘走一遍——Tab前进，Shift+Tab后退，Enter点击，Esc关闭弹窗。如果能完整操作一遍，基本过关。注意：弹窗打开时必须自动把焦点移到弹窗内，关闭后焦点回到触发按钮。

3. 图片加alt文本。别写「图片」或者空着。写清楚图片内容，帮助屏幕阅读器用户理解。装饰性图片可以用空alt（），但功能性图片必须有描述。

4. 表单label关联。每个input必须有关联的label，不是靠placeholder凑合。placeholder在输入后就消失了，对认知障碍用户极不友好。

检测工具

Google Lighthouse自带无障碍审计，跑一遍就有报告。更专业的用axe DevTools浏览器插件，能检测到80%以上的问题。自动化测试可以接入axe-core到CI流程里。

我自己习惯上线前手动跑一遍键盘导航+颜色对比度，加上Lighthouse审计。整套流程不到15分钟，但能拦住大部分问题。

标签： 无障碍设计 WCAG 网页设计 用户体验 前端开发