Web 可访问性知识手札
本手札按用户完成任务的路径学习语义、焦点、表单反馈、动态内容和测试治理,而不是背 ARIA 属性表。 每篇都要求先运行最小例子,再改变输入、时序、宿主或失败条件。
阅读起点
前置:HTML、CSS、JavaScript 函数/模块/Promise 和浏览器 DevTools。第一次学习按下面章节顺序阅读;已有框架经验也应回到对应平台实验核对行为。
全书顺序
第1章:语义、可访问名称与结构。 本章从“Landmark、heading 与结构”开始,经过可观察实验和失败变体,建立到“语义、可访问名称与结构”的连续因果链。
第2章:键盘、焦点与交互状态。 本章从“Escape、取消与返回焦点”开始,经过可观察实验和失败变体,建立到“Tab 顺序与 tabindex”的连续因果链。
第3章:表单错误、状态反馈与动态内容。 本章从“表单错误、状态反馈与动态内容”开始,经过可观察实验和失败变体,建立到“required、invalid 与描述”的连续因果链。
第4章:可访问性测试与治理。 本章从“自动规则与误报边界”开始,经过可观察实验和失败变体,建立到“可访问性测试与治理”的连续因果链。
第5章:焦点管理与对话框。 本章从“dialog、modal 与返回焦点”开始,经过可观察实验和失败变体,建立到“inert 与背景隔离”的连续因果链。
第6章:表单、错误与状态。 本章从“autocomplete 与输入目的”开始,经过可观察实验和失败变体,建立到“校验时机与错误汇总”的连续因果链。
第7章:Live region、动态内容与媒体。 本章从“aria-busy 与加载状态”开始,经过可观察实验和失败变体,建立到“减少动态与对比度”的连续因果链。
第8章:无障碍测试与治理。 本章从“组件治理与回归门禁”开始,经过可观察实验和失败变体,建立到“Accessibility Tree 核对”的连续因果链。
深入阅读
从平台输入追到最终状态
遇到“页面没有更新、请求结果过期或交互重复”时,先回到对应章节的输入、事件路径和资源所有权,再沿实验日志确认是哪一步改变了状态。不要先用框架重写来掩盖平台边界。
从正常路径追到失败恢复
把取消、权限拒绝、卸载、离线、配额不足、浏览器不支持和辅助技术差异分别运行;每种失败都应有可观察反馈和降级策略。
从平台能力连接到 Vue 与 React
完成本手札后,再回到 Vue 学习路线 或 React 学习路线,比较框架如何包装事件、更新、Effect、表单、组件和服务端边界。
例子和练习怎样使用
先记录环境、输入序列、预期结果,再运行代码;随后只改变一个条件。正文中的练习要求写出成功、失败、取消/卸载和降级断言,答案集中在本章答案页。真实浏览器、权限、读屏、触摸、跨源、Worker 和 Service Worker 行为不能用 Node 语法检查代替。