WHY IT MATTERS
先用一句白话理解
无障碍像建筑里的坡道、清晰标识和足够宽的门。它不是只为少数人准备的附加设施：推婴儿车、临时受伤、强光下看屏幕的人都会从中受益。
LEARNING OUTCOMES
学完你能做到什么
用 POUR 原则和 WCAG 2.2 AA 检查产品
理解 DOM、无障碍树、角色、状态和 accessible name
实现连续、可见且不会被遮挡的键盘焦点
正确实现表单、对话框、标签页和菜单等交互模式
结合自动化、键盘和屏幕阅读器进行人工验收
CONCEPT DEEP DIVE
把每个核心概念讲透
不要把知识点当作名词列表。下面每一项都要回到真实项目中回答：它解决什么问题，如何验证，以及在哪些条件下会失效。
可感知、可操作、可理解、稳健四项原则
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“审计并改造前述数据驾驶舱：补齐键盘路径、焦点管理、表单错误、动态播报、颜色对比和减少动态效果支持。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
语义 HTML、无障碍树、名称与描述
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“审计并改造前述数据驾驶舱：补齐键盘路径、焦点管理、表单错误、动态播报、颜色对比和减少动态效果支持。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
原生控件优先、ARIA 角色/状态/属性的边界
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“审计并改造前述数据驾驶舱：补齐键盘路径、焦点管理、表单错误、动态播报、颜色对比和减少动态效果支持。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
键盘顺序、焦点管理、跳转链接和焦点可见性
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“审计并改造前述数据驾驶舱：补齐键盘路径、焦点管理、表单错误、动态播报、颜色对比和减少动态效果支持。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
dialog、tabs、menu、combobox 等 APG 模式
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“审计并改造前述数据驾驶舱：补齐键盘路径、焦点管理、表单错误、动态播报、颜色对比和减少动态效果支持。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
表单说明、错误关联、live region 与动态更新
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“审计并改造前述数据驾驶舱：补齐键盘路径、焦点管理、表单错误、动态播报、颜色对比和减少动态效果支持。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
对比度、缩放、目标尺寸和减少动态效果
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“审计并改造前述数据驾驶舱：补齐键盘路径、焦点管理、表单错误、动态播报、颜色对比和减少动态效果支持。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
lang、dir、逻辑属性及国际化界面
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“审计并改造前述数据驾驶舱：补齐键盘路径、焦点管理、表单错误、动态播报、颜色对比和减少动态效果支持。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
CONCEPT MAP
这一章的学习步骤
完全不用鼠标完成核心任务
用浏览器无障碍树解释控件名称和角色
修复一组对比度、标签和焦点问题
用屏幕阅读器完成一次端到端操作并记录结果
HANDS-ON PROJECT
动手任务
审计并改造前述数据驾驶舱：补齐键盘路径、焦点管理、表单错误、动态播报、颜色对比和减少动态效果支持。
交付清单
- ✓WCAG 2.2 AA 检查表
- ✓修复前后的问题对照
- ✓键盘操作路径和屏幕阅读器测试记录
- ✓自动化扫描未覆盖问题的人工测试清单
MINIMUM RUNNABLE CODE
使用原生 dialog 管理模态焦点
<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8" />
<button id="open">查看删除说明</button>
<dialog id="confirm" aria-labelledby="dialog-title">
<h1 id="dialog-title">确认删除项目？</h1>
<p>删除后无法恢复，请确认已经导出数据。</p>
<form method="dialog">
<button value="cancel">取消</button>
<button value="confirm">确认删除</button>
</form>
</dialog>
<script>
const dialog = document.querySelector("#confirm");
document.querySelector("#open").addEventListener("click", () => dialog.showModal());
dialog.addEventListener("close", () => console.log("选择：" + dialog.returnValue));
</script>
</html>先让它跑起来，再逐行修改。最有效的学习方式，是观察你的改动如何影响结果。
DELIBERATE PRACTICE
三级练习：从复现到生产
每一级都比上一级少一点提示、多一点约束。只有在不看答案也能完成验收时，知识才真正变成能力。
让核心机制第一次跑通
- 完全不用鼠标完成核心任务
- 用浏览器无障碍树解释控件名称和角色
- 修复一组对比度、标签和焦点问题
- 用屏幕阅读器完成一次端到端操作并记录结果
改变约束，验证你真的理解
- 不看教程，独立完成：用 POUR 原则和 WCAG 2.2 AA 检查产品
- 不看教程，独立完成：理解 DOM、无障碍树、角色、状态和 accessible name
- 不看教程，独立完成：实现连续、可见且不会被遮挡的键盘焦点
- 不看教程，独立完成：正确实现表单、对话框、标签页和菜单等交互模式
- 不看教程，独立完成：结合自动化、键盘和屏幕阅读器进行人工验收
把实验变成能交付的工程
- WCAG 2.2 AA 检查表
- 修复前后的问题对照
- 键盘操作路径和屏幕阅读器测试记录
- 自动化扫描未覆盖问题的人工测试清单
- 检查兼容性、可访问性、性能、安全与渐进增强，并把检查结果写进项目复盘。
COMMON PITFALLS
最容易踩的坑
认为加上 aria-label 就等于完成无障碍
把自动扫描零错误当作完整合规证明
用正 tabindex 强行排列焦点顺序
视觉上隐藏内容时也意外从辅助技术中移除
SELF CHECK
先回答，再展开参考答案
Q01这一课最核心的业务目标是什么？＋
以 WCAG 2.2 AA 为基线，把语义、键盘、焦点、颜色、动态内容和多种输入方式纳入日常开发。自动扫描只是起点，最终还要像真实用户一样操作和验证。
Q02如果只能保留三个验收结果，应该保留什么？＋
WCAG 2.2 AA 检查表；修复前后的问题对照；键盘操作路径和屏幕阅读器测试记录
Q03学习过程中最需要主动避免什么？＋
认为加上 aria-label 就等于完成无障碍；把自动扫描零错误当作完整合规证明；用正 tabindex 强行排列焦点顺序；视觉上隐藏内容时也意外从辅助技术中移除
Q04怎样证明你不是“看懂了”，而是真的会做？＋
独立完成“审计并改造前述数据驾驶舱：补齐键盘路径、焦点管理、表单错误、动态播报、颜色对比和减少动态效果支持。”，并用测试、数据或运行结果逐项验收交付清单。
本课完成检查表
全部能打勾，再进入下一课。
- □目标明确：用 POUR 原则和 WCAG 2.2 AA 检查产品
- □核心机制已用最小实验验证：完全不用鼠标完成核心任务
- □风险已检查：认为加上 aria-label 就等于完成无障碍
- □风险已检查：把自动扫描零错误当作完整合规证明
- □风险已检查：用正 tabindex 强行排列焦点顺序
- □风险已检查：视觉上隐藏内容时也意外从辅助技术中移除
- □交付物可复现：WCAG 2.2 AA 检查表
- □交付物可复现：修复前后的问题对照
- □交付物可复现：键盘操作路径和屏幕阅读器测试记录
- □交付物可复现：自动化扫描未覆盖问题的人工测试清单
PRIMARY SOURCES
继续深入的官方资料
课程版本基线：2026 年 7 月。涉及版本号时，以链接中的官方文档为最终依据。