展开本页目录
开始前准备什么
- 先下载并解压本题工程，在独立练习目录保留starter、reference和原始输入。
- 本地参考主要需要Python 3与现代桌面浏览器；涉及Chrome扩展、LibreOffice、Git时按本文单独要求准备。
- 目标工具账号、模型额度与平台导入能力由读者另行确认；本文实际运行范围见执行记录，不自动调用付费服务。
- 在Cursor打开带缺陷demo
- 明确弹窗打开时焦点、Tab/Shift+Tab循环、Escape和关闭后的去向
- 优先使用适合的原生dialog或完整可访问实现
- 分别从两个不同按钮打开
- 加入隐藏和禁用控件
- 实际用键盘完整走一圈、反向一圈、Esc关闭
- 保存前后录屏帧与焦点日志
starter、七步任务、原始输入、人工完成的可运行参考、真实运行结果与独立验收；不含账号、数据库或缓存。
原生账号任务、本地工程运行和官方示例分开说明。
1. 在Cursor打开带缺陷demo
在Cursor打开带缺陷demo，用Tab复现背景链接被访问。
两个触发按钮分别对应阅读笔记和学习计划。原生dialog必须用showModal()打开，单加role或open属性不会产生相同行为。
2. 明确弹窗打开时焦点、Tab/Shift+Tab循环、Escape和关闭后的去向
明确弹窗打开时焦点、Tab/Shift+Tab循环、Escape和关闭后的去向。
真实Tab先看焦点是否会漏到背景帮助链接；背景是本例刻意保留的可聚焦元素，不是截图装饰。
3. 优先使用适合的原生dialog或完整可访问实现
优先使用适合的原生dialog或完整可访问实现，修复语义与背景可交互性。
showModal使背景隔离；文件名输入、确认、取消才是可用焦点，hidden和disabled不能混入。
4. 分别从两个不同按钮打开
分别从两个不同按钮打开，确保返回到本次触发按钮。
记录本次opener，关闭时返回该按钮。两个入口必须分别测，不能总把焦点送到第一个按钮。
5. 加入隐藏和禁用控件
加入隐藏和禁用控件，检查焦点候选没有包含不可用元素。
禁用按钮与hidden输入保留在DOM中，用于检查焦点候选；必填空字符串时确认不应悄悄提交。
独立目录练习命令
python3 -m http.server 8073 --directory reference6. 实际用键盘完整走一圈、反向一圈、Esc关闭
实际用键盘完整走一圈、反向一圈、Esc关闭，再做390px视口检查。
用真实键盘Tab/Shift+Tab循环，按Escape关闭，再在390px宽度检查。测试没有直接focus到预期控件来代替按键。
7. 保存前后录屏帧与焦点日志
保存前后录屏帧与焦点日志，运行独立行为断言。
browser-result.json保存每个触发器的实际焦点轨迹与返回者。该检查不代表完整WCAG认证或所有辅助技术均已通过。
怎样确认已经完成
- 弹窗开启后Tab与Shift+Tab仅在可用元素中循环，背景不可被键盘操作。
- 由两个按钮分别打开再关闭，焦点都回到对应触发者。
- Esc关闭、必填错误和390px小屏均可完成操作，隐藏输入不进入焦点顺序。
常见问题
网页弹窗看着正常，为什么键盘一按就跑到后面？
真实Tab先看焦点是否会漏到背景帮助链接；背景是本例刻意保留的可聚焦元素，不是截图装饰。 禁用按钮与hidden输入保留在DOM中，用于检查焦点候选；必填空字符串时确认不应悄悄提交。
怎么让AI修好Esc关闭和弹窗焦点返回？
记录本次opener，关闭时返回该按钮。两个入口必须分别测，不能总把焦点送到第一个按钮。 browser-result.json保存每个触发器的实际焦点轨迹与返回者。该检查不代表完整WCAG认证或所有辅助技术均已通过。
下载包哪些内容已实际运行，哪些需要自己在原生工具中验证？
已通过真实Tab/Shift+Tab/Escape检查两个来源的焦点恢复，并检查390px弹窗；Cursor会话未执行。 官方图片只证明所标入口或设置，不是本站原生任务执行截图。