# (Preview) Explore the full-page accessibility tree To explore the whole accessibility tree, follow the steps below. This view allows you to explore only a single node and its ancestors. Inspect an element's position in the accessibility tree from the Accessibility pane. It only contains elements from the DOM tree that are relevant and useful for displaying the page's contents in a screen reader. The accessibility tree is a subset of the DOM tree. # View an element's position in the accessibility tree This tab may be hidden behind the More Tabs button. In the DOM Tree, select the element which you want to inspect.The Accessibility pane is where you can view the accessibility tree, ARIA attributes, and computed accessibility properties of DOM nodes. One advantage that the aXe extension has over the Audits panel is that it lets you inspect and highlight failing nodes.s # The Accessibility pane The aXe extension has a different UI and describes audits slightly differently. They generally provide the same information, since aXe is the underlying engine that powers the Lighthouse panel. You may prefer to use the aXe extension or Lighthouse extension rather than the Lighthouse panel that is available by default in Chrome. Your report gives you various tips on how to improve the page's accessibility.Ĭlick Learn More to view that audit's documentation. After 10 to 30 seconds, DevTools provides a report. This option is also probably irrelevant to your accessibility score, so you can use whatever you prefer.Ĭlick Generate Report. The Clear Storage checkbox lets you clear all storage before loading the page, or preserve storage between page loads. This option should be irrelevant to your accessibility score, so you can use whatever you prefer. The Throttling section lets you throttle the network and CPU, which is useful when analyzing load performance. Leave them enabled if you want to discover other ways to improve the quality of your page. Disable the other categories if you want to exclude them from your report. In the Lighthouse section, make sure that Accessibility is enabled. If the mobile version of the page displays differently than the desktop version, this option could have a significant effect on the results of your audit. This option changes differently your user agent string and resizes the viewport. The Audits panel UI will look different in some earlier or later versions of Chrome, but the general workflow is the same.įor Device, select Mobile if you want to simulate a mobile device. In the screenshots, the tab is still named Audits but it was renamed into Lighthouse in Chrome 83 You can check what version you're running at chrome://version. Note: The screenshots in this section were taken with Chrome 69. DevTools shows you various configuration options. See also Make your website more readable. The text elements on a page have sufficient contrast ratios.A page is properly marked up for screen readers. In general, use the accessibility checks under the Lighthouse panel to determine if: See How To Do An Accessibility Review to learn more. The only way to find errors related to question #1 is to try using a page with a keyboard or screen reader yourself. Question #1 is just as important, but unfortunately DevTools can't help you there. In general, DevTools can help you fix errors related to question #2, because these errors are easy to detect in an automated fashion. Are the page's elements properly marked up for screen readers?.Can I navigate the page with a keyboard or screen reader?.When determining whether a page is accessible, you need to have 2 general questions in mind: This section explains how DevTools fits into your overall accessibility toolkit. # Overview of accessibility features in Chrome DevTools See Learn Accessibility if you'd like to learn how to develop accessible websites. See Navigating Chrome DevTools With Assistive Technology if you're looking for help on navigating DevTools with an assistive technology like a screen reader. The purpose of this reference is to help you discover all of the tools available in DevTools that can help you examine a page's accessibility. Are familiar with accessibility principles and best practices.Have a basic understanding of DevTools, such as how to open it.This page is a comprehensive reference of accessibility features in Chrome DevTools.
0 Comments
Leave a Reply. |