WCAG 2.1 四大原则详解：可感知、可操作、可理解、健壮性
WCAG 2.1 的四个原则，我习惯称之为「无障碍的四大支柱」。说白了，就是让每个人——无论视力、听力、行动能力如何——都能顺畅使用你的产品。每个原则下面还有具体的成功标准（A、AA、AAA 三个等级）。
做自动化测试时，我们会用工具检查这些标准是否达标。但一开始我总觉得「检测器一跑就完事了」，后来踩了坑才发现：很多标准工具根本测不准，必须结合手动判断。嗯，今天咱们就细聊这四个原则，顺便说说我踩过的坑。
核心要点：四大原则不是并列关系，而是层层递进的逻辑——
先让内容能被感知，再让交互可操作，然后确保用户理解，最后保证代码健壮。缺一个，体验就崩了。
1. 可感知（Perceivable）
内容必须通过一种以上的感官通道让用户获取。说白了，盲人看不到图片，你得给文本描述；聋人听不到视频，你得提供字幕或手语。我自己刚入行时，只在图片上加了 alt 属性就以为完事了——结果有个图表用 canvas 画出来，屏幕阅读器完全读不到，差点被客户投诉。从那以后，凡是非文本内容，我都会问自己一句：「不用眼睛，能看懂吗？」
测试要点：
- 文本替代：所有图片、图标、按钮必须有
alt或aria-label。 - 时间媒体：视频必须提供字幕；音频需提供文字稿。
- 适应性：内容在放大400%、改变字体、关闭样式后依然可读。
- 颜色与对比：文本和背景的对比度至少 4.5:1（AA级）；大文本 3:1。
我的小技巧：用 axe DevTools 跑一遍只能发现30%的颜色问题。真正的对比度需要用 Colour Contrast Analyser 手动吸色验证，尤其是渐变背景和图片上的文字。
2. 可操作（Operable）
指用户必须能用键盘、语音、开关等设备完成所有操作。我记得有个项目，登录按钮绑定了一个 onclick，但没加 keydown 事件——普通鼠标用户没问题，但用 Tab 键聚焦后按 Enter 没反应。这就是典型的「可感知但不可操作」。
测试要点：
- 键盘可访问：所有交互元素都能用 Tab 键到达，Enter/Space 触发。
- 焦点可见：聚焦时必须有清晰的轮廓（outline），不能去掉。
- 避开闪烁：不要有每秒 3 次以上的闪烁，否则可能诱发癫痫。
- 时间控制：限时操作（如超时登出）必须提供延长、暂停选项。
我曾经踩过的坑：一个后台管理页面，表格行点击跳转。我用了 <tr onclick>，但没加 tabindex 和 role="link"，结果键盘用户完全无法聚焦。后来我给每个 <tr> 加了 tabindex="0" 和键盘事件，才算真正「可操作」。
3. 可理解（Understandable）
内容和界面必须让用户读得懂、用得顺。你想想看，一个弹出窗口突然出现，没有提前告知，视障用户可能会懵——这是哪来的？怎么关？可理解原则就是要避免这种「意外」。
关键要求：
- 语言标记：
<html lang="zh-CN">必须准确，否则屏幕阅读器会用错误的语音库朗读。 - 可预测：操作前最好有提示；不要让用户不知情的情况下跳转或打开新窗口。
- 输入帮助：表单要有清晰的 label 和错误提示。比如密码输入框，如果规则是「至少8位且含数字」，输入错误时要给出具体描述，而不是只说「格式错误」。
| 场景 | 违反原则 | 正确做法 |
|---|---|---|
| 浮动层突然弹出 | 可理解（无焦点管理） | 设置 aria-modal="true"，焦点陷入弹层内 |
| 错误提示只有红色 | 可感知 + 可理解 | 同时用文字和图标说明，并用 aria-describedby 关联 |
| 表单提交后刷新 | 可预测（无状态保留） | 用 AJAX 提交并保留用户输入 |
4. 健壮性（Robust）
内容必须能被各种辅助技术（如屏幕阅读器、语音控制）正确解析。说白了，你的 HTML 要写标准，别用一些奇技淫巧。我见过一个老系统，用 <div role="button"> 但没加 tabindex，结果 JAWS 完全识别不了——这就是「代码不健壮」。
测试要点：
- 有效语法： HTML 必须通过 W3C 验证，不能有未闭合标签或非法属性。
- 语义化结构： 使用正确的 HTML 元素（如
<button>而不是<div>），搭配 ARIA 角色。 - 兼容性： 在所有主流浏览器和屏幕阅读器组合下测试。我建议至少测三个组合：NVDA+Firefox、JAWS+Chrome、VoiceOver+Safari。
一个真实案例： 我曾经维护一个 React 应用，用 aria-expanded 控制折叠面板，但状态更新时忘记同步到 DOM，导致 NVDA 读不到展开/收起状态。解决办法是在 useEffect 中强制刷新属性，或者在组件 render 时直接绑定。
测试健壮性时，我常用一个简单的方法：把网页源码复制到 W3C Nu HTML Checker（离线版也行），看看有没有解析错误。不过要注意，有些浏览器自动补全标签会让校验器通过，但实际上页面可能还是有问题。所以一定要用真实环境 + 辅助工具跑一遍。
总结一下： 四个原则是一个有机整体。测试时我习惯按这个顺序查：可感知 → 可操作 → 可理解 → 健壮性。发现一个原则的问题，往往也会牵连到其他原则。比如一张没有 alt 的图片（可感知问题），同时导致键盘用户无法理解它的功能（可理解问题）。以后写自动化用例时，可以根据这四个维度分层设计，每个维度挑几个关键成功标准来验证。