访问网站的辅助功能树

Question

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

Answer 1

查看辅助功能树 Google Chrome

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

查看辅助功能树 Firefox

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

其它浏览器

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

了解辅助功能树

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

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

通过定期使用屏幕阅读器并进行实验，您将获得对可访问性的更好理解，可访问性树仅用于识别奇怪的行为（例如，动态内容未正确暴露给屏幕阅读器），即使如此，它也确实有用不要暴露你想象的那么多信息。