使用代码访问辅助功能树

Question

TLDR：如何以编程方式访问给定网页的可访问性树？是否有任何内部 API 可以通过 JavaScript 调用来查看辅助功能树？

我正在构建一个测试套件来检查网页内可访问性的正确性。目前，我们通过比较 DOM 并检查某些属性是否存在且正确来做到这一点。我想不再使用 DOM，因为它会带来大量需要遍历的额外数据，而只检查 a11y 树的正确性。这棵树可以在大多数现代网络浏览器的开发工具/检查器中找到，但我不知道如何用代码检查它。通过我的研究，我发现有一个新的 AOM（可访问性对象模型）正在被建议，但尚未实现。我还发现“puppeteer”包能够访问它。有什么办法可以直接访问吗？

Answer 1

您的想法是正确的：最好测试生成的可访问性树，而不是对底层 DOM 进行断言。除了您描述的额外遍历之外，还有其他一些很好的原因。

（对我来说）主要原因是，通过在 HTML DOM 中查找属性，您实际上是在对实现细节做出断言。然而，好的测试应该与实现细节无关。例如，可访问性测试不应该关心开发人员是否使用<input type="image" src="foo.png" alt="foo">或<button type="button"><img src="foo.png" alt="foo"></button>，因为就可访问性树而言，两者具有相同的语义。

aria-owns检查可访问性树也是断言诸如此类的关系行为正确的更好方法；因为该属性的目的是创建 DOM 树中不存在的父/子关系。

据我所知，还没有一个好的方法可以直接获取可访问性树。这被视为可访问性对象模型的一个功能；特别是第 4 阶段：计算可访问性树API。这还远没有准备好。一个主要问题是不同的浏览器都必须公开相同的可访问性树，以便应用程序/测试作者不必处理浏览器的怪癖。AOM 解释文档中有更多相关信息。

您描述的测试方法确实是计算辅助功能树 API 想要满足的用例之一。我希望自己也能以这种方式使用它，可能是通过 Nightwatch 等测试框架调用的。

我最近才意识到page.accessibility.snapshotPuppeteer 的功能，听起来很令人兴奋。我还没有任何使用 Puppeteer 的经验，所以我无法提供与此相关的完全知情的答案。不过，令我印象深刻的一个方面是，Puppeteer 是一个用于控制无头 Chromium 浏览器的 Node.js 库。所以我假设它当前处理由 Chromium 派生的可访问性树。这可能与 AOM 计算可访问性树标准化工作所要求的树不太一样。我认为暂时将其视为不稳定的技术是安全的。