使用“辅助功能”选项卡测试辅助功能

在 “辅助功能” 选项卡上,可以查看 DOM 节点的辅助功能树、ARIA 属性和计算出的辅助功能属性。

若要打开 “辅助功能 ”选项卡:

  1. 在呈现的网页中,右键单击某个元素,然后选择 “检查”。

    DevTools 随即打开,并选择“ 元素” 工具。 DOM 树随即打开,显示右键单击的元素。

  2. 在 DOM 树中,单击要检查的元素。 可以使用箭头键在 DOM 树中移动。

  3. 单击“样式”选项卡右侧的“辅助功能”选项卡。可能需要先单击“样式”选项卡右侧的“更多选项卡” (“更多选项卡”按钮) 按钮。

“元素”工具边栏面板中的“辅助功能”选项卡

查看元素在辅助功能树中的位置

辅助功能树是 DOM 树的子集。 辅助功能树仅包含 DOM 树中的元素,这些元素对于通过辅助技术(如屏幕阅读器)显示页面内容非常有用。

从“ 辅助功能 ”选项卡检查元素辅助功能树中的元素位置。

辅助功能树部分

查看元素的 ARIA 属性

ARIA 属性可确保辅助技术(如屏幕阅读器)拥有正确显示页面内容所需的所有信息。

查看 “辅助功能 ”选项卡中元素的 ARIA 属性。

ARIA 属性部分

查看元素的计算出的属性

某些辅助功能属性由浏览器动态计算。 这些属性显示在辅助功能选项卡的计算属性部分中。

在“ 辅助功能 ”选项卡中查看元素的计算出的属性。

辅助功能选项卡的“计算属性”部分

计算出的辅助功能属性与计算出的 CSS 属性不同。 若要详细了解如何查看计算的 CSS 属性,请参阅“仅查看 CSS 功能参考”中实际应用于元素的 CSS。

注意

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面可在 此处 找到,作者为 Kayce Basques。

Creative Commons 许可证 本作品根据 Creative Commons Attribution 4.0 International License 获得许可。