google-chrome - 访问网站的辅助功能树

Question

问：如何使用开发者工具查询网站的辅助功能树？有可能做到吗？我试图了解辅助功能树如何工作并帮助屏幕阅读器。

Answer 1

查看可访问性树 Google Chrome

• 打开开发者工具 (F12)
• 转到元素
• 在右侧面板上转到辅助功能（它可能隐藏在“更多”选项下>>）
• 然后，当您检查元素时，您可以看到它们是如何暴露在可访问性树中的。

查看可访问性树 Firefox

• 打开开发者工具 (F12)
• 转到辅助功能选项卡。
• 右键单击页面上的元素并选择“检查辅助功能属性”

其它浏览器

• 您可以通过类似的方法在 Edge 中查看辅助功能树（开发者工具 > 元素 > 辅助功能树 - 与 Google Chrome 相同）。
• Safari 不会直接通过浏览器公开辅助功能树，但您可以从 Mac App Store 安装扩展。如果我错过了启用此功能的标志，请纠正我。

了解辅助功能树

我会警告您，理解可访问性树不会对理解可访问性本身提供太多帮助，它实际上会使它更加混乱。

它基本上模仿了 DOM 的结构，暴露了一些额外的位，并且很多位被“忽略”为屏幕阅读器不关心的通用元素。

通过简单地定期使用屏幕阅读器并进行试验，您将对可访问性有更好的理解，可访问性树仅用于识别奇怪的行为（例如，动态内容没有正确地暴露给屏幕阅读器），即使那样它确实如此不要像您想象的那样公开尽可能多的信息。