展开本页目录
开始前准备什么
- 下载练习包，先阅读 README 中的依赖和运行范围。
- 使用独立练习目录；starter 是待完成任务，reference 是作者参考实现。
- 账号型功能须在自己的授权环境执行；本题不要求提供真实凭据。
- 保留视觉基线
- 采集原生快照
- 制造语义退化
- 定位差异来源
- 修复标签和角色
- 放宽动态文字
- 回读修复产物
1. 保留视觉基线
打开 fixtures/good.html：真实 button 和 for/id 关联标签都在。保存原生 ARIA 树时只选 main，避免把无关页眉和动态通知一起锁进快照。
2. 采集原生快照
在浏览器上下文调用 locator.ariaSnapshot()，将 baseline.aria.yml 与源码一起保存。可读名称“联系邮箱”必须来自标签，而不是误把 placeholder 当成正确名称。
本题本地命令
npm install
npm run verify3. 制造语义退化
把 button 改成同样样式的 div，并移除 label 的 for；不改 CSS。页面截图看起来几乎相同，但真实的 button 角色和邮箱名称会消失。
4. 定位差异来源
运行坏页面后读取 regressed.aria.yml。getByRole 对两个预期名称都返回 0；把这两段树与 bad.html 的实际行对应起来，再交给 AI 修复。
5. 修复标签和角色
要求 AI 恢复原生 button 与 label for/id，不用 aria-hidden 隐藏问题，也不把全部 div 强行标成 button。reference 保留作者完成版，starter 留给读者独立修改。
6. 放宽动态文字
把更新时间从 10:23 改为 10:24，快照用正则只约束“更新时间”语义。toMatchAriaSnapshot 必须在 Playwright test 中执行，不能当普通 Node 脚本断言调用。
7. 回读修复产物
重新运行验证：角色和名称恢复，动态时间变化仍可通过。保存两份 ARIA 树、同样外观的截图和 verification.json；这组断言不等于完整可访问性审核。
怎样确认已经完成
- 能发现role/name变化
- 不过度匹配动态文字
- 不宣称完整无障碍合规
- 已运行 Playwright 原生 ARIA 快照、角色定位器和修复后断言；没有调用 AI 账号，也未进行完整无障碍合规审计。
常见问题
页面看起来一样怎么发现按钮已经不能被读屏识别？
使用原生 ARIA 树与 getByRole 定位器。视觉样式能让 div 看起来像按钮，但 ARIA 树中的角色和可读名称已变；本题用原生树和 getByRole 分别验证。
Playwright ARIA 快照应该忽略哪些动态文字？
只放宽与任务无关的时间、随机 ID 等动态值。核心按钮角色、表单标签与业务名称要继续严格比较；不要把整棵树改成任意匹配。
哪些功能已经实际执行？
已运行 Playwright 原生 ARIA 快照、角色定位器和修复后断言；没有调用 AI 账号，也未进行完整无障碍合规审计。