Skip to content

Web 可访问性知识手札 ​

本手札按用户完成任务的路径学习语义、焦点、表单反馈、动态内容和测试治理,而不是背 ARIA 属性表。 每篇都要求先运行最小例子,再改变输入、时序、宿主或失败条件。

阅读起点 ​

前置:HTML、CSS、JavaScript 函数/模块/Promise 和浏览器 DevTools。第一次学习按下面章节顺序阅读;已有框架经验也应回到对应平台实验核对行为。

全书顺序 ​

第1章:语义、可访问名称与结构。 本章从“Landmark、heading 与结构”开始,经过可观察实验和失败变体,建立到“语义、可访问名称与结构”的连续因果链。

  1. Landmark、heading 与结构
  2. 名称计算与 label
  3. 原生控件优先
  4. 语义、可访问名称与结构

第2章:键盘、焦点与交互状态。 本章从“Escape、取消与返回焦点”开始,经过可观察实验和失败变体,建立到“Tab 顺序与 tabindex”的连续因果链。

  1. Escape、取消与返回焦点
  2. 键盘、焦点与交互状态
  3. Roving tabindex 列表
  4. Tab 顺序与 tabindex

第3章:表单错误、状态反馈与动态内容。 本章从“表单错误、状态反馈与动态内容”开始,经过可观察实验和失败变体,建立到“required、invalid 与描述”的连续因果链。

  1. 表单错误、状态反馈与动态内容
  2. aria-live 与状态消息
  3. 加载、busy 与空状态
  4. required、invalid 与描述

第4章:可访问性测试与治理。 本章从“自动规则与误报边界”开始,经过可观察实验和失败变体,建立到“可访问性测试与治理”的连续因果链。

  1. 自动规则与误报边界
  2. 键盘与读屏任务
  3. 组件门禁与例外记录
  4. 可访问性测试与治理

第5章:焦点管理与对话框。 本章从“dialog、modal 与返回焦点”开始,经过可观察实验和失败变体,建立到“inert 与背景隔离”的连续因果链。

  1. dialog、modal 与返回焦点
  2. 焦点顺序与 tabindex
  3. focus-visible 与可见焦点
  4. inert 与背景隔离

第6章:表单、错误与状态。 本章从“autocomplete 与输入目的”开始,经过可观察实验和失败变体,建立到“校验时机与错误汇总”的连续因果链。

  1. autocomplete 与输入目的
  2. 自定义控件与原生替代
  3. label、description 与错误
  4. 校验时机与错误汇总

第7章:Live region、动态内容与媒体。 本章从“aria-busy 与加载状态”开始,经过可观察实验和失败变体,建立到“减少动态与对比度”的连续因果链。

  1. aria-busy 与加载状态
  2. aria-live 更新策略
  3. 字幕、transcript 与控制
  4. 减少动态与对比度

第8章:无障碍测试与治理。 本章从“组件治理与回归门禁”开始,经过可观察实验和失败变体,建立到“Accessibility Tree 核对”的连续因果链。

  1. 组件治理与回归门禁
  2. 键盘回归测试
  3. 辅助技术差异
  4. Accessibility Tree 核对

深入阅读 ​

从平台输入追到最终状态 ​

遇到“页面没有更新、请求结果过期或交互重复”时,先回到对应章节的输入、事件路径和资源所有权,再沿实验日志确认是哪一步改变了状态。不要先用框架重写来掩盖平台边界。

从正常路径追到失败恢复 ​

把取消、权限拒绝、卸载、离线、配额不足、浏览器不支持和辅助技术差异分别运行;每种失败都应有可观察反馈和降级策略。

从平台能力连接到 Vue 与 React ​

完成本手札后,再回到 Vue 学习路线 或 React 学习路线,比较框架如何包装事件、更新、Effect、表单、组件和服务端边界。

例子和练习怎样使用 ​

先记录环境、输入序列、预期结果,再运行代码;随后只改变一个条件。正文中的练习要求写出成功、失败、取消/卸载和降级断言,答案集中在本章答案页。真实浏览器、权限、读屏、触摸、跨源、Worker 和 Service Worker 行为不能用 Node 语法检查代替。

开始阅读:第一章

用心记录每一步成长