Virtual Screen Reader 项目中关于无限递归问题的技术解析

Virtual Screen Reader 项目中关于无限递归问题的技术解析

virtual-screen-reader Virtual Screen Reader is a screen reader simulator for unit tests. 项目地址: https://gitcode.com/gh_mirrors/vi/virtual-screen-reader

问题背景

在使用 Virtual Screen Reader 0.30.1 版本对特定网站进行遍历时，开发者遇到了一个无限递归的问题。当尝试通过 while 循环遍历文档中的所有可读元素时，系统无法检测到文档结束标志，导致无限循环。

问题重现

开发者提供的代码片段展示了如何重现这个问题：

const { virtual } = await import("虚拟屏幕阅读器模块");
await virtual.start({ container: document.body, displayCursor: true });

let lastSpokenPhrase = ""
while (virtual.activeNode !== null && lastSpokenPhrase !== "end of document") {
  lastSpokenPhrase = await virtual.lastSpokenPhrase();
  console.log(lastSpokenPhrase);
  await virtual.next();
}
await virtual.stop();

问题分析

经过深入分析，这个问题实际上是由网站设计中的"焦点陷阱"(focus trap)导致的。在目标网站上，存在一个国家的模态对话框，这个对话框设计为不允许用户直接跳过或关闭，从而形成了一个无法逃脱的焦点循环。

这种现象在Web无障碍设计中被称为"键盘陷阱"，是WCAG 2.1成功标准2.1.2中明确指出的无障碍问题。屏幕阅读器用户会被困在这个循环中无法继续浏览页面其他内容。

技术解决方案

对于这类问题，Virtual Screen Reader 作为模拟真实屏幕阅读器行为的工具，严格遵循了屏幕阅读器的实际工作方式。这意味着它不会主动绕过或跳过这类焦点陷阱，因为这样做会偏离真实用户的实际体验。

对于开发者构建的无障碍检测工具，建议采取以下策略：

1. 节点访问追踪：维护一个已访问节点的记录，当检测到重复访问同一节点时，可以判断存在焦点陷阱

2. 交互式扫描：对于需要用户交互才能显示的内容，提供交互机制后再进行扫描

3. 焦点陷阱检测：实现专门的检测逻辑来识别和报告这类无障碍问题

最佳实践建议

1. 真实场景模拟：在测试时，确保模拟真实用户的操作流程，包括处理可能出现的模态对话框

2. 问题报告：将发现的焦点陷阱作为无障碍问题报告给开发者，而不是试图在工具中绕过它们

3. 渐进式扫描：对于复杂页面，考虑分段扫描而非一次性完整遍历

4. 用户教育：在工具中向用户解释发现的焦点陷阱及其对无障碍体验的影响

总结

这个案例展示了Web无障碍测试中的一个典型挑战。Virtual Screen Reader 通过严格模拟真实屏幕阅读器行为，帮助开发者发现实际存在的无障碍问题，包括这种可能导致用户被困的焦点陷阱。理解这一设计理念对于构建有效的无障碍测试工具至关重要。

virtual-screen-reader Virtual Screen Reader is a screen reader simulator for unit tests. 项目地址: https://gitcode.com/gh_mirrors/vi/virtual-screen-reader