使用代码访问辅助功能树

如何解决使用代码访问辅助功能树

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

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

解决方法

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

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

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

据我所知，目前还没有直接获取可访问性树的好方法。这被认为是可访问性对象模型的一个特性；特别是 Phase 4: Computed Accessibility Tree API。这还远远没有准备好。一个主要问题是不同的浏览器都必须公开相同的可访问性树，因此应用程序/测试作者不会处理浏览器的怪癖。 AOM explainer 文档中有更多相关信息。

您描述的测试方法确实是 Computed Accessibility Tree API 打算满足的用例之一。我自己希望以这种方式使用它，可能是通过 Nightwatch 之类的测试框架调用的。

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