访问网站的辅助功能树

Question

问：如何使用开发人员工具查询网站的可访问性树？有可能吗？。我试图了解可访问性树的工作原理并帮助屏幕阅读器。

Answer 1

查看可访问性树Google Chrome

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

查看可访问性树Firefox

• 打开开发人员工具（F12）
• 转到辅助功能选项卡。
• 右键单击页面上的元素，然后选择“检查辅助功能属性”

其他浏览器

• 您可以通过类似的方法在Edge中查看可访问性树（开发人员工具>元素>可访问性树-与Google Chrome相同。
• Safari不会直接通过浏览器显示可访问性树，但是您可以从Mac App Store安装扩展。 如果有一个我无法启用此标志的标志，请纠正我。

了解可访问性树

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

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

通过简单地定期使用屏幕阅读器并进行实验，您将获得对可访问性的更好理解，可访问性树仅用于识别奇怪的行为（例如，动态内容未正确显示在屏幕阅读器中），甚至它不会像您想象的那样提供太多信息。