资源 · 57
对话框和键盘：测试焦点路径
检查中断任务的界面中的打开、移动、关闭和上下文恢复。
已更新 · 3 min
本指南有助于实现的目标
- 选择合适的组件
- 放置易于理解的焦点
- 允许关闭
- 恢复上下文
快速检查
- 是否需要模态框？
- 打开时焦点落在哪里？
- 背景是否真的静止？
- 是否可以通过键盘关闭对话框？
- 如果触发点消失，焦点会返回到哪里？
分步指南
- 1
选择中断方式
确定信息是否需要模态框，或者可以保留在页面中。 区分模态对话框、面板和菜单。 优先使用合适的原生元素并检查其行为；ARIA 角色不会自动创建交互。
交付成果：组件选择及理由。
- 2
名称和打开
将易于访问的名称连接到可见的标题。 根据任务需要，将焦点放置在合适的位置：结构化内容的开头、有用的字段或安全的操作。 打开时，开头部分不应滚动到屏幕外。
交付成果：已测试的打开方式。
- 3
键盘导航
根据 W3C 的模态对话框模式，Tab 和 Shift+Tab 键在内容内部保持有效，在内容外部无效。 验证可见的焦点、逻辑顺序以及嵌套控件中是否存在陷阱。
交付成果：前进和后退导航。
- 4
关闭和恢复
提供可见的关闭方式和预期的 Esc 行为。 如果触发器不再存在，则将焦点返回到触发器或逻辑步骤。 提交后，用户应能找到更改的内容以及后续操作。
交付成果：恢复焦点和上下文。
- 5
测试错误和空间
包含长消息、无效字段、移动键盘和缩放功能。 滚动不应永久隐藏操作或标题。 错误信息应清晰易懂且易于访问，且不会丢失已输入的值。
交付成果：窄屏边缘情况。
- 6
在页面中进行检查
使用键盘和辅助技术测试集成组件，而不仅仅是在隔离的演示环境中。 检查重复打开和重复关闭后的焦点问题。 仅本地验收不足以获得 WCAG 认证。
交付成果：验收记录和已知限制。
可重复使用的工作表
填写您已授权的观察结果。 这些字段是工作模板，而非观察结果。
| 字段 | 待记录信息 |
|---|---|
| 开始 | 触发、标题和初始焦点 |
| 旅程 | Tab、Shift+Tab、惰性背景和可见焦点 |
| 结束 | Esc、按钮和逻辑回车 |
| 限制 | 测试缩放、长内容、错误和辅助功能 |
虚构示例
示例情境
示例：对话框确认删除行，其打开按钮消失。
决策及预期证据
确认后，焦点返回到下一个逻辑元素或列表标题，并显示结果和下一步操作。
区分机制
| 机制 | 目的 | 验证或限制 |
|---|---|---|
| 模态对话框 | 中断有界任务 | 惰性背景和包含焦点 |
| 非模态面板 | 保持上下文可用 | 连贯的焦点移动 |
| 页面部分 | 显示持续信息 | 通常更易于查阅 |
管理指标
| 指标 | 衡量内容 | 首要行动 |
|---|---|---|
| 完成键盘操作 | 无需指针即可执行的任务 | 修复阻塞 |
| 正确返回焦点 | 关闭以恢复有用的上下文 | 处理缺失的触发器 |
| 测试边缘状态 | 缩放、错误和长内容 | 文档遗漏 |
常见错误
- 添加无惰性内容的 aria-modal 属性
- 关闭后失去焦点
- 在没有明确退出的情况下阻止 Esc 键
- 仅测试鼠标 开启
常见问题解答
原生对话框是否足够？
它提供了有用的功能，但命名、初始焦点、内容、错误和集成仍需测试。
第一个按钮是否应该获得焦点？
不一定。 合适的焦点取决于内容和任务，尤其是在不可逆决策的情况下。
自动化能否验证流程？
它可以检测到一些缺陷，但理解、合理的顺序和恢复的上下文需要人工审核。
官方参考文献
参考文献支持该方法。 请根据您的实际情况调整检查；它们并非认证。 原始参考文献标题和源文档可能使用其他语言。
参考资料查阅日期 .
