辅助功能参考Accessibility reference

本页是 Microsoft Edge 开发工具辅助功能的综合参考。This page is a comprehensive reference of accessibility features in Microsoft Edge DevTools. 适用于以下 web 开发人员: It is intended for web developers who:

此参考的目的是帮助你发现开发工具中提供的所有工具,可帮助你检查页面的辅助功能。The purpose of this reference is to help you discover all of the tools available in DevTools that help you examine the accessibility of a page.

如果正在使用屏幕阅读器等辅助技术导航开发工具时寻求帮助,请导航至使用辅助技术导航 Microsoft Edge 开发工具If you are looking for help on navigating DevTools with an assistive technology like a screen reader, navigate to Navigating Microsoft Edge DevTools With Assistive Technology.

Microsoft Edge 开发工具中的辅助功能概述Overview of accessibility features in Microsoft Edge DevTools

本部分介绍了开发工具如何适应整个辅助功能工具包。This section explains how DevTools fits into your overall accessibility toolkit.

确定页面是否可访问时,需要记住 2 个一般性问题:When determining whether a page is accessible, you need to have 2 general questions in mind:

  1. 是否可以使用键盘或屏幕阅读器浏览页面?Are you able to navigate the page with a keyboard or screen reader?
  2. 页面的元素是否正确标记了屏幕阅读器?Are the elements of the page properly marked up for screen readers?

通常,开发工具应该可帮助你修复与问题 2 相关的错误,因为这些错误很容易以自动方式检测。In general, DevTools should help you fix errors related to question #2, because these errors are easy to detect in an automated fashion. 问题 1 同样重要,但遗憾的是,开发工具没有用。Question #1 is just as important, but unfortunately DevTools does not help you there. 查找问题 1 相关错误的唯一方法是尝试自己使用带有键盘或屏幕阅读器的页面。The only way to find errors related to question #1 is to try using a page with a keyboard or screen reader yourself.

审核页面的辅助功能Audit the accessibility of a page

备注

审核工具提供指向第三方网站上托管的内容的链接。The Audits tool provides links to content hosted on third-party websites. Microsoft 不负责也不控制这些网站的内容,并且可能会收集任何数据。Microsoft is not responsible for and has no control over the content of these sites and any data that may be collected.

通常,使用审核窗格来确定是否:In general, use the Audits panel to determine if:

审核页面:To audit a page:

  1. 导航到要审核的 URL。Navigate to the URL that you want to audit.

  2. 在开发工具中,选择审核工具。In DevTools, choose the Audits tool. 开发工具显示各种配置选项。DevTools shows you various configuration options.

    配置审核

    备注

    此部分中屏幕截图取自 Microsoft Edge 版本 79。The screenshots in this section were taken with Microsoft Edge version 79. 可以在 edge://version 上查看正在运行的版本。You may check what version you are running at edge://version. 审核工具 UI 在早期版本的 Microsoft Edge 中看起来有所不同,但是一般的工作流程相同。The Audits tool UI looks different in earlier versions of Microsoft Edge, but the general workflow is the same.

  3. 对于“设备”,如果要模拟移动设备,请选择“移动设备”。For Device, choose Mobile if you want to simulate a mobile device. 此选项将更改用户代理字符串并调整视口的大小。This option changes your user agent string and resizes the viewport. 如果页面的移动版本显示方式与桌面版本不同,则此选项可能会显著影响审核结果。If the mobile version of the page displays differently than the desktop version, this option may have a significant effect on the results of your audit.

  4. 在“审核”部分中,确保已启用“辅助功能”。In the Audits section, make sure that Accessibility is enabled. 如果要从报告中排除其他类别,请禁用它们。Disable the other categories if you want to exclude them from your report. 如果希望发现其他方法提高页面质量,请将其保持启用状态。Leave them enabled if you want to discover other ways to improve the quality of your page.

  5. “限制 ”部分可让你限制网络和 CPU,这在分析负载性能时非常有用。The Throttling section lets you throttle the network and CPU, which is useful when analyzing load performance. 此选项应该与辅助功能分数无关,因此可以使用自己喜欢的任何内容。This option should be irrelevant to your accessibility score, so you may use whatever you prefer.

  6. 清除存储空间”复选框可让你在加载页面之前清除所有存储,或在页面加载之间保留存储。The Clear Storage checkbox lets you clear all storage before loading the page, or preserve storage between page loads. 此选项还可能与辅助功能分数无关,因此可以使用自己喜欢的任何内容。This option is also probably irrelevant to your accessibility score, so you may use whatever you prefer.

  7. 选择“运行审核”。Choose Run Audits. 10 到 30 秒后,开发工具将提供一个报告。After 10 to 30 seconds, DevTools provides a report. 你的报告为你提供有关如何提高页面辅助功能的各种提示。Your report gives you various tips on how to improve the accessibility of the page.

    报告

  8. 选择审核以了解更多信息。Choose an audit to learn more about it.

    有关审核的更多详细信息

  9. 选择了解更多信息以查看该审核的文档。Choose Learn More to view the documentation of that audit.

    查看审核文档

另请参阅:aXe 扩展See also: aXe extension

你可能更喜欢使用 “aXe 扩展”而不是“审核”工具。You may prefer to use the aXe extension rather than the Audits tool.
aXe 扩展通常提供相同的信息,因为它是支持审核窗格的基础引擎。The aXe extension generally provides the same information, since it is the underlying engine that powers the Audits panel. aXe 扩展具有不同的 UI,并且对审核的描述略有不同。The aXe extension has a different UI and describes audits slightly differently.
ax 扩展相对于“审核”工具的一个优势是,可以检查并突出显示出现故障的节点。One advantage that the aXe extension has over the Audits tool is that it enables you to inspect and highlight failing nodes.

aXe 扩展

辅助功能窗格The Accessibility panel

在“辅助功能”窗格上,可以查看 DOM 节点的辅助功能树、ARIA 属性和计算出的辅助功能属性。The Accessibility panel is where you view the accessibility tree, ARIA attributes, and computed accessibility properties of DOM nodes.

打开辅助功能窗格:To open the Accessibility panel:

  1. 选择“元素”工具。Choose the Elements tool.
  2. DOM 树中,选择要检查的元素。In the DOM Tree, select the element which you want to inspect.
  3. 选择辅助功能窗格。Choose the Accessibility panel. 此窗格可能隐藏在更多 选项卡 (更多 选项卡) 按钮后面。This panel may be hidden behind the More Tabs (More Tabs) button.

在“辅助功能”窗格中检查开发工具主页的 h1 元素。

查看元素在辅助功能树中的位置View the position of an element in the accessibility tree

辅助功能树是 DOM 树的子集。The accessibility tree is a subset of the DOM tree. 它仅包含 DOM 树中的元素,这些元素对于在屏幕阅读器中显示页面内容非常有用。It only contains elements from the DOM tree that are relevant and useful for displaying the contents of a page in a screen reader.

从“辅助功能“窗格检查元素辅助功能树中的元素位置。Inspect the position of an element in the accessibility tree from the Accessibility panel.

辅助功能树部分

查看元素的 ARIA 属性View the ARIA attributes of an element

ARIA 属性可确保屏幕阅读器拥有正确显示页面内容需要的所有信息。ARIA attributes ensure that screen readers have all of the information that they need in order to properly represent the contents of a page.

辅助功能窗格中查看元素的 ARIA 属性。View the ARIA attributes of an element in the Accessibility panel.

ARIA 属性部分

查看元素的计算出的属性View the computed accessibility properties of an element

备注

如果要查找计算出的 CSS 属性,请导航到“计算”窗格。If you are looking for computed CSS properties, navigate to Computed panel.

部分辅助功能属性由浏览器动态计算。Some accessibility properties are dynamically calculated by the browser. 这些属性显示在“**辅助功能 **”窗格的“计算出的属性”部分中。These properties are displayed in the Computed Properties section of the Accessibility panel.

查看“辅助功能”窗格中元素的计算出的属性。View the computed accessibility properties of an element in the Accessibility panel.

辅助功能窗格“计算属性”部分

查看颜色选取器中的文本元素的对比率View the contrast ratio of a text element in the Color Picker

部分弱视用户看不到非常明亮或非常暗的区域。Some people with low vision do not see areas as very bright or very dark. 所有内容通常以相同的亮度显示,从而难以区分轮廓和边缘。Everything tends to appear at about the same brightness, which makes it hard to distinguish outlines and edges.

对比率测量文本的前景和背景的亮度差。Contrast ratio measures the difference in brightness between the foreground and background of text. 如果您的文本的对比度低,那么这些弱视用户可能会以空白屏幕的形式实际体验网站。If your text has a low contrast ratio, then these low vision users may literally experience your site as a blank screen.

颜色选取器可帮助你验证文本是否满足建议的对比率级别:The Color Picker helps you verify that your text meets recommended contrast ratio levels:

  1. 选择“元素”工具。Choose the Elements tool.

  2. DOM 树中,选择要检查的文本元素。In the DOM Tree, select the text element that you want to inspect.

    检查 DOM 树中的段落

  3. 在“样式”窗格中,选择元素 color 值旁边的彩色方块。In the Styles panel, choose the color square next to the color value of the element.

    元素的颜色属性

  4. 检查“颜色选取器”中的“对比率”部分。Check the Contrast Ratio section of the Color Picker. 一个选中标记表示元素满足最低建议One checkmark means that the element meets the minimum recommendation. 一个选中标记表示元素满足增强建议Two checkmarks means that it meets the enhanced recommendation.

    颜色选取器中的“对比率”部分显示 2 个选中标记和值 13.97

  5. 有关详细信息,请选择“对比率”部分。For more information, choose the Contrast Ratio section. 颜色选取器顶部的可视化选取器中将出现一行。A line appears in the visual picker at the top of the Color Picker. 如果当前颜色符合建议,则该行的同一侧任何内容也符合建议。If the current color meets recommendations, then anything on the same side of the line also meets recommendations. 如果当前颜色不满足建议,则同一侧的颜色也不符合建议。If the current color does not meet recommendations, then anything on the same side also does not meet recommendations.

    可视选取器中的对比率行

联系 Microsoft Edge 开发工具团队Getting in touch with the Microsoft Edge DevTools team

使用以下选项讨论帖子中的新功能和更改,或与 DevTools 相关的任何其他内容。Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • 使用“发送反馈”图标发送反馈,或在 DevTools 中选择Alt+Shift+I \ (Windows、Linux) 或 Option+Shift+I \ (macOS)。Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • 发推 @EdgeDevToolsTweet at @EdgeDevTools.
  • 我们想要的 Web 提交建议。Submit a suggestion to The Web We Want.
  • 若要提交有关本文的错误,请使用以下“反馈” 部分。To file bugs about this article, use the following Feedback section.

Microsoft Edge DevTools 中的“发送反馈”图标

备注

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
原始页面位于此处,由 Kayce Basques\(Chrome DevTools & Lighthouse 的技术作家\)撰写。The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。This work is licensed under a Creative Commons Attribution 4.0 International License.